Effects

backdrop-filter

backdrop-filter blurs or recolors whatever shows through behind an element. It is the go-to property for frosted-glass panels.

Syntax

none | <filter-value-list>

<filter-value-list> = [ <filter-function> | <url> ]+

Preview

Presets

Drag the bottom-right corner to resize

Code

.box {
  background-color: #ffffff33;
  border-radius: 16px;
  backdrop-filter: blur(8px);
}

Controls

blur(8px)

Add a function

About

How it differs from filter

filter processes the element itself, children included. backdrop-filter processes only what is behind the element and draws the element’s own background and text untouched. It takes the same functions as filter, applied from left to right.

Make the background translucent

The processed backdrop is painted under the element’s background, so an opaque background hides it completely. Pair it with a translucent background color; the preview here uses background-color: #ffffff33, and the pattern behind is just decoration for the preview. The effect stays inside the element’s frame and follows the rounded corners from border-radius.

Watch out

As with filter, any value other than none makes the element a stacking context and the containing block for position: fixed descendants.
If an ancestor has a filter, an opacity below 1, a mix-blend-mode and the like, only what is drawn inside that ancestor gets processed. If the backdrop is less blurred than you expect, check the ancestors.
Blurring is expensive to render. Avoid it on large areas or on elements that keep moving while scrolling.

References

MDN Web Docsbackdrop-filter SpecificationFilter Effects Module Level 2 Can I usebackdrop-filter