CSS Filters

CSS filters let you apply visual effects (blur, grayscale, contrast, and more) directly to an element and its children, no image editor required. Stack a few together and you can create custom looks, like a frosted-glass hover state, using nothing but CSS.

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.

Try them out for yourself in CSS styling.