Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
filter
what

What is a CSS filter?

Educative Answers Team

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.

svg viewer

Different filters

CSS provides many filters, all of which have different effects. The image below will be used to demonstrate a few different filters:

#grayscale()​

This filter changes an image to grayscale using the percentage value passed as an argument:

#sepia()

This filter changes an image to sepia using the percentage value passed as an argument:

#saturate()

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:

#invert()

This filter inverts an image using the percentage value passed as an argument:

blur()

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:

Check the CSS documentation for other filters and their effects.

RELATED TAGS

css
filter
what
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring