Filters
Apply visual effects to an element, like blur, grayscale, and brightness, right from your stylesheet.
What is the CSS Filter Property?
The `filter` CSS property applies graphical effects to an element. It can be used to render an element's visual appearance similar to what you'd see in image-editing software. You can apply one or more filter functions to an element, such as `blur()`, `brightness()`, `contrast()`, `grayscale()`, `sepia()`, and more.
Filters are particularly useful for creating hover effects, providing visual feedback for disabled elements, or applying a consistent visual style across images and other media.
Common Filter Functions
/* Blurs the image */ filter: blur(5px); /* Increases the brightness */ filter: brightness(150%); /* Adjusts the contrast */ filter: contrast(200%); /* Converts to black and white */ filter: grayscale(100%); /* Applies a sepia tone */ filter: sepia(100%); /* Multiple filters can be combined */ filter: grayscale(100%) blur(2px);
Live Example: Hover to Apply Filters
Hover over each image below to see a different filter effect applied to it.