CSS filters apply visual effects to HTML elements and their children using Cascading Style Sheets (CSS). CSS filters enable the application of a range of image processing techniques to the content and background of an element.
You can combine multiple CSS filters to manipulate an element’s rendering. Here are a few of the CSS filters available in Webflow:
Blur — applies a Gaussian blur, making it appear out of focus
Grayscale — converts to grayscale, removing all color
Sepia — applies a sepia tone, giving it a vintage look
Brightness — adjusts the luminosity
Filters benefit state changes, such as transitioning an image from grayscale to color when a user hovers over it. You can also use backdrop filters to add depth with dynamic blurring and color effects on the area behind the elements.
