Use backdrop filters to create dynamic blurring and color effects on the area behind elements.
Make your foreground content stand out by applying and layering backdrop filters to create unique visual effects on your background elements. You can also live preview each backdrop filter in your design — all without having to use any custom code.
Important: Backdrop filters is currently in beta. These styles won’t display properly on Firefox in the Webflow Designer or published sites until support is added to Firefox. See current browser support.
In this lesson you’ll learn:
Adding a backdrop filter to any element lets you apply filter effects (e.g., blur, color shift, contrast, etc.) to transparent areas inside the element’s boundary. Anything behind the element that’s visible through the transparent areas is affected by the backdrop filter.
You can also apply multiple backdrop filters to a single element. You can layer and combine the backdrop filters together to create a variety of visual effects.
Good to know: Because the backdrop filter applies to everything behind the element, to see the effect you must make the element, portions of the element, or its background at least partially transparent.
Backdrop filters have the same effect as filters, with one notable difference — backdrop filters apply only to areas behind the element instead of to the element and its children. Filters, on the other hand, apply directly to the element and its children, and don’t affect anything behind the element.
There are 8 Backdrop filters in Webflow’s Effects section of the Style panel. Filters that behave similarly are placed next to each other in the Backdrop filters dropdown. These filter groupings consist of:
Let’s walk through how each backdrop filter behaves when you apply it to an element whose content has some level of transparency.
Blur applies a gaussian blur to your content. The blur radius adjusts the strength of the blur — larger values create more blur, and smaller values create less blur.
Brightness makes content appear more or less bright. You can adjust the amount — values below 100% decrease brightness, and values over 100% increase brightness.
Contrast increases or decreases contrast of your content. You can adjust the amount — values below 100% decrease contrast, and values over 100% increase contrast.
Hue rotate changes the overall hue of your content, based on hues found around a standard color circle. You can set the angle at which the number of degrees around the color circle the hue will be shifted or rotated. Smaller angles (e.g., 10 degrees) display cool colored hues, and larger angles (e.g., 340 degrees) display warm colored hues. You can manually enter degrees past 360 degrees, which has the effect of wrapping around the color circle again (e.g., 400 degrees displays the same result as 40 degrees).
Saturation increases or decreases the saturation of your content. You can adjust the amount — values below 100% decrease saturation, and values over 100% increase saturation.
Grayscale converts your content to grayscale. You can adjust the amount — values below 100% decrease the grayscale effect, and values at or over 100% display complete grayscale of your content.
Invert reverses the colors of your content by inverting them. You can adjust the amount — values below 100% decrease the inversion effect, and values at or over 100% display completely inverted content.
Sepia converts your content to a sepia tone. You can adjust the amount — values below 100% decrease the sepia effect, and values at or over 100% display completely sepia-toned content.
You can add backdrop filters to any element in your design. However, to be able to see the effect, you’ll need to make sure your element’s content is partially transparent. You can do this by using SVG or PNG image files, setting a transparent background on the element, or reducing the element’s opacity.
Let’s set a blur backdrop filter on an element:
Repeat the above steps if you’d like to stack multiple filters together. Multiple filters behave like layers — you can click and drag each filter layer to change their order.
To switch between visible and hidden for each backdrop filter effect:
To edit your filter’s settings:
To delete a filter:
Additional resources: Learn more about the Style panel.