Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • CSS Filters

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 462
    Comment on it

    Hey Readers :)

    We apply different in-built filters to our day to day pictures. Some of these filters, if not all, can be applied to the images we use in our websites with the help of CSS. This is done by the CSS property filter.

    CSS Filters is a very powerful property. Developers use this to achieve various fun and appealing visual effects.

    Browser support for CSS Filter is not very great.

    Different filters available for use are :

    • blur()
    • brightness()
    • contrast()
    • drop-shadow()
    • grayscale()
    • hue-rotate()
    • invert()
    • opacity()
    • saturate()
    • sepia()
    • url()

    Multiple filters can also be applied separated by a space.

    Here is an example below.


    HTML :

    <img src="pineapple.jpg" alt="Pineapple">


    CSS :

    img {
        -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
        filter: grayscale(100%);
    /* Apply multiple filters */
    img {
        filter: contrast(175%) brightness(3%);

    OUTPUT :

    Original image---


    After filter---


    Keep Coding!!

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: