CSS filters

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.

Visit Webflow University for lessons on CSS filters, backdrop filters, and CSS.