filter property

The filter property defines visual effects (like blur and saturation) to an element, this is often used on the <img>. I'll be explaining the 10 different values and providing examples to each one.

1) blur()

Applies a blur effect to the image. A larger value will create more blur.

2) brightness()

At 0%, the image completely black. Values over 100% will provide brighter results.

3) contrast()

At 0, the image completely black. Values over 100 will provide greater contrast.

4) drop-shadow()

Applies a drop shadow effect to the image. The syntax is simply: drop-shadow(y-shadow x-shadow blur colour).

5) grayscale()

At 0%, it represents the original image. 100% will make the image completely grey.

6) saturate()

At 0%, the image is completely un-saturated. At 100%, the original image is represented. Values over 100% provides super-saturated results.

7) sepia()

Converts the image to sepia.

8) hue-rotate()

Applies a hue rotation on the image. The value defines the number of degrees around the colour circle the image samples will be adjusted. 0deg is the default value.

9) invert()

Inverts the samples in the image.

10) opacity()

The opacity-level describes the transparency-level of an image. At 0, the image is completely transparent.

Conclusion

It seems that CSS is getting better and better. Now we have a way to design beautiful images with no help from Photoshop.

Hope you enjoyed the article and that it proves to be helpful.