Filter Functions

Published Aug 6, 2021Updated Sep 9, 2021

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(): Increases or decreases the color intensity of an element.
sepia(): Changes the color of an element to sepia.