Newly available Helpful when backdrop-filter improves stylesheet organization, fallback behavior, or cascade control.

backdrop-filter

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect the element or its background needs to be transparent or partially transparent.

Syntax and cascade

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
backdrop-filter
76
79
103
18
76
18
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (79)
Compatibility
  • Available with a vendor prefix: -webkit- (17)
Notes 1 item(s)
Implementation note
  • Before Firefox 123, the property was not supported on systems with unknown GPU vendor (see bug 1868737).
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (9)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (9)

Syntax

CSS 
.glass-panel {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
}

.navbar {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

Live demo

glasseffect(blur)

backdrop-filter glasseffect(blur) demo.

PreviewFullscreen

blur + saturate

backdrop-filter Blur + saturate demo.

PreviewFullscreen

darkoverlay

backdrop-filter darkoverlay demo.

PreviewFullscreen

Use cases

  • Maintainable CSS architecture

    Use backdrop-filter to make stylesheet intent clearer in larger codebases and shared design systems.

  • Fallback management

    Control resets, imports, inheritance, or feature branches with explicit CSS rules instead of ad hoc duplication.

Cautions

  • Cascade-level tools are powerful, so misuse can make style ownership harder to understand.
  • Keep rules scoped and documented when they affect many selectors or entire stylesheets.

Accessibility

  • Global CSS controls should not accidentally remove focus, contrast, or structural cues.
  • Fallback paths should remain readable and functional, especially for assistive-technology users.

Related links