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!!