Filter Functions

Published Aug 6, 2021Updated Sep 9, 2021
Contribute to Docs

The CSS filter property applies graphical effects like blur to an element. It is commonly used to adjust the rendering of images, backgrounds, and sometimes even borders.

Filter Functions

blur()
Defines the blur radius of an element.
brightness()
Defines the brightness or darkness of an element.
contrast()
Defines the contrast on an element.
drop-shadow()
Creates a drop shadow effect on an element.
grayscale()
Converts an element to grayscale.
hue-rotate()
Accepts an angle value and rotates the hue of an element.
invert()
Inverts the colors of an element.
opacity()
Controls how much of the background is visible through the element it is applied to.
saturate()
Increase or decrease the intensity of the color of the element it is applied to.
sepia()
Changes the color of an element to sepia.

All contributors

Looking to contribute?

Learn CSS on Codecademy