CSS filter is a powerful tool which allows users to alter the visual effects of an image. It provides various operations which can be performed on an image and change its visual properties.
Imagine a filter which darkens the color of a particular image when applied. See the illustration of such a filter on the right.
CSS provides many filters, all of which have different effects. The image below will be used to demonstrate a few different filters:
This filter changes an image to grayscale using the percentage value passed as an argument:
This filter changes an image to sepia using the percentage value passed as an argument:
This filter saturates an image using the percentage value passed as an argument. Here the value of 500% is used to display super-saturated results:
This filter inverts an image using the percentage value passed as an argument:
This filter blurs an image by a certain value; it takes the value of pixels on the screen, that blend into each other, and blurs them. Therefore, a larger value will create more blur. This filter does not accept a percentage value:
View all Courses