Backdrop filters

Use backdrop filters to create dynamic blurring and color effects on the area behind elements.

This video features an old UI. Updated version coming soon!
A montage of backdrop filters effects in the Webflow Designer, including blur, is shown against a colorful backdrop. 

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:

  1. What a backdrop filter is
  2. How backdrop filters behave
  3. How to add backdrop filters to an element

What a backdrop filter is

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.

How backdrop filters differ from filters

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. 

The difference between a blur backdrop filter (top) and a blur filter (bottom) is shown. The top navbar with the blur backdrop filter makes elements behind it appear blurred. The bottom navbar with the blur filter affects the element and its children (e.g., the entire navbar and text are blurred) and doesn’t blur elements behind it. 

How backdrop filters behave

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:

A grid of 8 Backdrop filter options shows the different behavior of each.

Let’s walk through how each backdrop filter behaves when you apply it to an element whose content has some level of transparency. 

General

Blur

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. 

A blur backdrop filter is applied to a navbar element. 

Color adjustments

Brightness

Brightness makes content appear more or less bright. You can adjust the amount — values below 100% decrease brightness, and values over 100% increase brightness. 

A brightness backdrop filter is applied to a navbar element. 

Contrast

Contrast increases or decreases contrast of your content. You can adjust the amount — values below 100% decrease contrast, and values over 100% increase contrast. 

A contrast backdrop filter is applied to a navbar element.

Hue rotate

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). 

A hue rotate backdrop filter is applied to a navbar element. 

Saturation

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. 

A saturation backdrop filter is applied to a navbar element. 

Color effects

Grayscale

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. 

A grayscale backdrop filter is applied to a navbar element. 

Invert

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.

An invert backdrop filter is applied to a navbar element. 

Sepia

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.

A sepia backdrop filter is applied to a navbar element. 

How to add backdrop filters to an element

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: 

  1. Select your element
  2. Go to the Style panel > Effects > Backdrop filters
  3. Click the “plus” icon to the right of Backdrop filters
  4. Click the filter dropdown menu to view your filter options
  5. Hover over any filter in the dropdown to live preview the filter effect
  6. Choose Blur from the dropdown menu 
  7. Adjust the blur radius to control the level of blur on your element
  8. Click out of the backdrop filter settings to save your changes
The Backdrop filters area of the Effects section in the Style panel is highlighted.
The Blur backdrop filter is selected from the dropdown menu in the Effects section of the Style panel. 
Backdrop filter blur levels can be adjusted with the blur radius.

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.

Three backdrop filters are stacked together in the Backdrop filters area of the Style panel.

To switch between visible and hidden for each backdrop filter effect: 

  1. Go to the Style panel > Effects > Backdrop filters
  2. Hover over the filter you’d like to hide or make visible
  3. Press the “eye” icon to toggle the filter’s visibility
The “eye” icon is highlighted in the Backdrop filters section of the Style panel.

To edit your filter’s settings: 

  1. Go to the Style panel > Effects > Backdrop filters
  2. Choose the filter you created to open its settings
  3. Make your changes and click out of the filter’s settings to save your adjustments

To delete a filter: 

  1. Go to the Style panel > Effects > Backdrop filters
  2. Hover over the filter you’d like to delete
  3. Press the “trash” icon
The “trash” icon is highlighted in the Backdrop filters section of the Style panel.

Additional resources: Learn more about the Style panel.

Try Webflow — it's free
No items found.
This video features an old UI. Updated version coming soon!