CSS Backdrop Filter: Browser Support, Filters, Limitations

What is CSS backdrop-filter?

backdrop-filter is a CSS property defined by the W3C in the Filter Effects Module Level 2. It applies graphical effects, such as blur, brightness, or saturation, to the painted area behind an element. The element itself must be partially transparent for the effect to show through.

Which browsers does CSS backdrop-filter support?

backdrop-filter ships in every modern engine, but the path to unprefixed support was uneven. The Web Platform Baseline marks it as Newly Available, with Safari the last engine to drop the -webkit- prefix and Internet Explorer the only major engine that never added the property.

What filter functions does backdrop-filter accept?

backdrop-filter accepts the same filter functions as the filter property, plus url() for an SVG filter reference. You can chain several functions in one declaration, and the browser applies them left to right to the painted area behind the element.

• blur(length): Applies a Gaussian blur to the backdrop. The most common value for a frosted glass effect is between 8px and 16px. Larger radii cost more GPU time on low-end Android devices.
• brightness(percentage): Brightens or darkens the backdrop. Values above 100% lift it; values below 100% dim it. Pair brightness(80%) with a sticky header to add depth without a solid background.
• contrast(percentage): Increases or decreases the difference between light and dark pixels behind the element. Useful for legibility on busy hero images.
• grayscale(percentage), sepia(percentage), invert(percentage): Color shifts that desaturate, tint, or invert the backdrop. Use grayscale(60%) on a modal overlay to mute the page underneath.
• hue-rotate(angle), saturate(percentage): Rotate the hue or push saturation. saturate(180%) is the Apple-style trick that makes a blurred backdrop pop without changing brightness.
• opacity(percentage), drop-shadow(...): Limited support. opacity() and drop-shadow() ship reliably only in Firefox Nightly behind the regular flag; Chrome, Edge, and Safari currently ignore them on backdrops.
• url(svg-filter-id): References a custom SVG filter. Useful for color matrices and convolutions that the built-in functions cannot express.

/* 1. Frosted glass card. The translucent background lets the blurred backdrop show through. */
.glass-card {
    background-color: rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 24px;
}

/* 2. Sticky header with a darker tint over scrolling content. */
.app-header {
    position: sticky;
    top: 0;
    background-color: rgba(20, 20, 20, 0.55);
    -webkit-backdrop-filter: blur(8px) brightness(80%);
    backdrop-filter: blur(8px) brightness(80%);
}

/* 3. Modal overlay that desaturates the page behind it. */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: grayscale(60%) blur(4px);
    backdrop-filter: grayscale(60%) blur(4px);
}

/* 4. Detect support before shipping a fallback. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .glass-card {
        background-color: rgba(255, 255, 255, 0.9);
    }
}

What are the use cases of backdrop-filter?

backdrop-filter replaces a stack of older techniques such as duplicating an image and blurring it under a clipped element, blurring with SVG filters, or shipping a pre-rendered noise texture. Most teams adopt it on translucent UI surfaces where the content behind has to stay legible without disappearing.

• Glassmorphism cards and panels: A translucent card with backdrop-filter: blur(12px) saturate(180%) gives the Apple-style frosted glass look on dashboards, settings panes, and pricing tables.
• Sticky headers and navigation bars: A semi-transparent header with backdrop-filter: blur(8px) keeps the page hierarchy visible as the user scrolls, without the hard edge of a solid bar.
• Modal overlays: Apply blur and a slight grayscale to the backdrop so the modal sits clearly above the page while the dimmed content stays recognizable.
• Drawer and sidebar surfaces: Mobile-style off-canvas drawers feel native when the backdrop is blurred instead of completely darkened.
• Tooltips and popovers on hero images: A blurred backdrop keeps the tooltip text readable over photographic backgrounds where a flat color would clash.
• Video player chrome: The play, pause, and seek controls in custom video players use a translucent surface with backdrop-filter: blur(10px) so the underlying frame still shows through the controls.

What are the known issues with backdrop-filter?

backdrop-filter ships widely now, but several rendering quirks still bite teams. Most issues come from the -webkit- prefix gap on Safari, parent transforms that break the backdrop root, and the limited reach of the opacity() and drop-shadow() filter functions on backdrops.

• Safari needs the -webkit- prefix until 18: Safari 9 to 17 only honors -webkit-backdrop-filter. Ship both -webkit-backdrop-filter and backdrop-filter in the same rule so older iOS and macOS traffic keeps the effect.
• No effect without a transparent background: backdrop-filter only paints the area behind a translucent element. An element with a fully opaque background ignores the property silently because nothing of the backdrop is visible.
• Parent transforms break the backdrop root: A parent with transform, filter, or will-change creates a new stacking context and removes the backdrop root. The blur then applies to a blank surface, and the effect appears to do nothing.
• opacity() and drop-shadow() are unreliable: Chrome, Edge, and Safari ignore opacity() and drop-shadow() on backdrop-filter today. Only Firefox Nightly applies them. Plan your design around blur, brightness, contrast, and saturate.
• GPU cost on low-end mobiles: Large blur radii on full-screen backdrops drop frame rates on low-end Android phones. Cap the radius at 12 to 16 pixels and avoid stacking multiple blurred surfaces in the same scroll area.
• Internet Explorer has no support: IE 5.5 to 11 drop the declaration. For legacy traffic, fall back to a translucent background-color, a pre-blurred image asset, or an Edge IE Mode tab.

In my experience, the trap that bites teams hardest is shipping a glassmorphism card inside a parent that adds will-change: transform for animation, then wondering why the blur silently disappears on the production build but worked fine in the isolated component preview.

Citations

All backdrop-filter version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - backdrop-filter: developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
• W3C Filter Effects Module Level 2: drafts.fxtf.org/filter-effects-2
• WebKit blog - Introducing Backdrop Filters: webkit.org/blog/3632/introducing-backdrop-filters
• Chrome Platform Status - backdrop-filter: chromestatus.com/feature/5679432723333120
• Mozilla Firefox 103 release notes: mozilla.org/en-US/firefox/103.0/releasenotes
• MDN Web Docs - filter: developer.mozilla.org/en-US/docs/Web/CSS/filter
• MDN Web Docs - filter-function: developer.mozilla.org/en-US/docs/Web/CSS/filter-function
• Microsoft Learn - Microsoft Edge developer documentation: learn.microsoft.com/en-us/microsoft-edge/web-platform
• Wikipedia - Cascading Style Sheets: en.wikipedia.org/wiki/Cascading_Style_Sheets
• Web Platform Baseline: web.dev/baseline