Create OS-style backgrounds with backdrop-filter

Backdrop-filter: OS-style depth for the web

Operating systems have long used translucency and background blur to create visual depth while keeping context visible. Frosted glass panels, video overlays, and translucent navigation headers all rely on the ability to dynamically blend foreground and background colors. Those effects historically required fragile hacks on the web. Safari and Edge offered backdrop-filter (and -webkit-backdrop-filter) for years; Chrome finally shipped support in version 76.

The principle is simple: backdrop-filter applies one or more CSS filter functions to whatever renders behind an element, not to the element itself. For the effect to appear, the overlaying element must be at least partially transparent — with an opacity of 1, there is nothing to blur. Applying the property also creates a new stacking context for the element, and it may create a containing block when the element has absolutely or fixed positioned descendants.

All standard CSS filter functions are available: blur(), brightness(), contrast(), opacity(), drop-shadow(), plus the url() filter and keywords none, inherit, initial, and unset. Filters can be combined, and SVG filters can be referenced as well.

Using backdrop-filter

The effect becomes apparent when comparing overlapping elements with and without a translucent overlay. Without backdrop-filter, a semi-transparent overlay simply blends with what is behind it. Adding backdrop-filter: blur() softens the backdrop while preserving the overlay's transparency. For performance reasons, do not polyfill the property in unsupported browsers — fall back to an image instead.

Frosted glass with a single filter

A classic frosted-glass look needs two ingredients: a blur supplied by backdrop-filter, and a tint from the element's own semi-transparent background-color.

.glass {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

Combining multiple filters

Filter lists are space-separated. Different combinations of blur, brightness, and saturation can produce distinct panels, all reacting to the same animated content behind them.

.pane {
  backdrop-filter: blur(20px) brightness(120%) saturate(150%);
}

Readable overlays

Blurring a page's backdrop behind a semi-transparent panel keeps the underlying visual context while making overlaid text legible — useful for modal captions or content cards.

.overlay {
  backdrop-filter: blur(20px);
  background-color: rgba(0, 0, 0, 0.4);
}

Text contrast over dynamic backgrounds

One of the most valuable use cases is maintaining legibility when the background animates or changes beneath the text. A fixed element with backdrop-filter keeps inverting and re-tinting whatever passes under it, preserving high contrast.

.dynamic-text {
  color: white;
  backdrop-filter: invert(100%);
}

Follow-up resources

For deeper reading, the filter effects specification and MDN's reference entry describe the full syntax and function list. Chrome's platform status page has release details, and you can find community examples on CodePen.