**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. 


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

![](/api/edpresso/shot/6607566169702400/image/4746337159479296)

# #grayscale()​
This filter changes an image to grayscale using the percentage value passed as an argument:

img {
  -webkit-filter: grayscale(70%);
  filter: grayscale(70%);
}

codemirror

# #sepia()

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

img {
  -webkit-filter: sepia(70%);
  filter: sepia(70%);
}

# #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:

img {
  -webkit-filter: saturate(500%);
  filter: saturate(500%);
}

# #invert()
This filter inverts an image  using the percentage value passed as an argument:

img {
  -webkit-filter: invert(80%);
  filter: invert(80%);
}

## 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:

img {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

>Check the [CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) for other filters and their effects.

What is a CSS filter?

CSS filters allow altering an image's visual effects using operations like grayscale, sepia, saturate, invert, and blur.

What is a CSS filter?

Different filters

#grayscale()​

#sepia()

#saturate()

#invert()

blur()

#grayscale()