CSS backdrop-filter: blur, brightness, saturate and When to Use Each

What backdrop-filter Actually Does (and What It Doesn't)

backdrop-filter applies one or more filter functions to the area *behind* an element — not to the element itself, not to its children, just the rendered pixels visible through it. That's the whole trick. It landed in Chrome 76 (2019), shipped in Firefox 103 behind a flag, and finally became flag-free in Firefox 122 in early 2024. So as of 2026 you've got genuine cross-browser support without polyfills.

The most common mistake people make is confusing it with filter. Run filter: blur(8px) and you blur the element and everything inside it — text, icons, children, the lot. That's almost never what you want for a glass card. backdrop-filter: blur(8px) blurs only what's peeking through behind the element. Same function name, completely different target.

Worth noting: the element needs to have some transparency for any of this to matter. A fully opaque background: white blocks the backdrop entirely — the filter runs, wastes GPU cycles, and you see nothing. You need rgba, hsl with an alpha channel, or a Tailwind class like bg-white/10 before backdrop-filter does anything visible.

One more thing — backdrop-filter always triggers a new stacking context. This can break z-index layouts you already have. If your modals or dropdowns start disappearing behind glass cards, that's why.

blur() — The One Everyone Uses

backdrop-filter: blur(Xpx) is the backbone of glassmorphism components. It applies a Gaussian blur to the backdrop, and the pixel radius you pick makes a massive difference in feel. 4px reads as a subtle frosted texture. 12px is the sweet spot for most UI cards. 40px and above starts looking more like a bokeh photo effect than a UI surface.

.glass-card {
  /* Translucent fill */
  background: rgba(255, 255, 255, 0.12);

  /* The frosted blur — 12px is the classic sweet spot */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari still needs this */

  /* The glass edge */
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
}

Honestly, the -webkit- prefix for Safari is still worth including even in 2026. Safari on iOS ships WebKit builds that trail behind desktop Safari by a few months, and stripping the prefix means iOS users see an opaque box instead of a glass panel. Just double the line — it costs nothing.

Performance-wise, blur() is the most expensive filter because it samples a large kernel of surrounding pixels. On a 1px blur the GPU barely blinks. At 48px on a 1920×1080 element you're doing real work. Keep your blurred surfaces small and your blur radius reasonable, and you'll be fine. Stack six full-viewport glass overlays and you will drop frames on mid-range Android.

If you use Tailwind, backdrop-blur-sm gives you 4px, backdrop-blur-md gives 12px, and backdrop-blur-3xl hits 64px. For most design work, stop at backdrop-blur-xl (24px) unless you're going for a deliberate dramatic effect.

brightness() — Darkening or Lightening the Backdrop

backdrop-filter: brightness(0.5) darkens everything behind the element. Values below 1 darken, above 1 lighten. This is how modal overlays *should* be built — instead of a flat rgba(0,0,0,0.6) div, you can use backdrop-filter: brightness(0.4) on the scrim element for a result that feels more photographic and less flat.

In practice, you'll almost always combine brightness() with blur(). The combination is what makes dark-mode glass cards work — you darken the backdrop slightly so light text on the card has a fighting chance at contrast, while the blur keeps the frosted texture visible.

/* Dark-mode modal scrim */
.modal-backdrop {
  background: transparent;
  backdrop-filter: brightness(0.45) blur(4px);
  -webkit-backdrop-filter: brightness(0.45) blur(4px);
}

/* Dark glass card — brightens backdrop slightly on dark bg */
.glass-card-dark {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px) brightness(1.1);
  -webkit-backdrop-filter: blur(16px) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

Quick aside: brightness() is GPU-accelerated through the same compositing path as blur(), so cost is low. You won't notice a frame difference between brightness(1) (no-op) and brightness(0.5). Combine it freely — it's not blur() in terms of GPU weight.

saturate() — Making Backdrops Pop (or Fade)

backdrop-filter: saturate(1.8) cranks up the color intensity of everything behind the element. This is Apple's signature move — macOS Sonoma menus use it to punch up the background colors so the glass surface looks richer than the content around it. Values above 1 oversaturate, values below 1 desaturate, and saturate(0) goes full grayscale.

Why would you desaturate a backdrop? Think confirmation dialogs. You want the user's attention on the dialog content, not the colorful page behind it. backdrop-filter: saturate(0.2) blur(6px) mutes the background without hiding it — cleaner than a solid overlay, more context-preserving than a full blackout.

Look, saturate() on its own doesn't create depth. It creates emphasis. The real power is in combining it with blur() — saturation makes the blurred color wash look vibrant rather than washed-out. That combination is exactly what the glassmorphism generator outputs when you crank the intensity slider up past 70.

/* Apple-style sidebar panel */
.sidebar {
  background: rgba(250, 250, 255, 0.7);
  backdrop-filter: blur(20px) saturate(1.8) brightness(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.05);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

That three-function combo — blur + saturate + brightness — is what Apple ships in macOS. You can generate your own variant of it directly in the glassmorphism generator and copy out production-ready CSS in seconds.

contrast(), grayscale(), and the Other Filter Functions

The full backdrop-filter function list is: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, sepia, and saturate. Most UI work touches only the first three. The rest are niche but genuinely useful.

contrast() is underused. backdrop-filter: contrast(1.2) on a frosted card makes the background colors behind it read as sharper and more defined — it's a subtle effect that can help legibility without touching the element's own text. hue-rotate() is the one you reach for if you want a tinted glass effect — rotate the hue of the backdrop by 30°–60° and your card takes on a color tint without you having to add a colored background fill.

invert() is mostly a novelty outside of dark-mode toggles and very specific design contexts. grayscale() is genuinely useful for disabled states — backdrop-filter: grayscale(1) on a locked feature card tells users that area is inactive without requiring a separate overlay element.

That said, every function you add to a backdrop-filter declaration increases the GPU work slightly. blur() dominates the cost by a large margin, so adding saturate(1.4) on top of an existing blur is essentially free. Building a declaration with six chained functions and no blur() is cheap. Adding blur(32px) to any chain is where you need to watch frame budgets on lower-end hardware.

Performance: What Actually Costs You Frames

The GPU compositing cost of backdrop-filter scales with the blur radius and the pixel area of the element. A 12px blur on a 300×200px card is negligible. A 40px blur on a full-viewport panel is doing real work — on a 4K display that's potentially millions of pixels being sampled. The math is unforgiving.

Three practical rules: keep blur() radius under 20px for elements larger than ~400×400px; avoid stacking more than three or four backdrop-filter elements in the same scroll viewport at once; and never animate the blur radius (blur: 0px to blur: 16px). Animating blur re-triggers compositing every frame and will drop you to 30fps or worse on mobile. Animate opacity instead — fade the glass element in, keep the blur value static.

/* DO THIS — fade in with static blur */
.glass-toast {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 200ms ease;
}
.glass-toast.visible { opacity: 1; }

/* DON'T DO THIS — animating blur kills perf */
.glass-toast-bad {
  backdrop-filter: blur(0px);
  transition: backdrop-filter 300ms ease; /* janky */
}
.glass-toast-bad.visible { backdrop-filter: blur(12px); }

You can always test your specific setup using Chrome DevTools' Rendering panel — enable "Paint flashing" and "Layer borders" to see exactly which elements are triggering new compositing layers. If you've got 12 glass cards on one page and they're all flashing on scroll, that's your signal to reduce either the count or the blur radius.

For the heaviest use cases — full-screen panels, persistent sidebars — consider will-change: backdrop-filter to hint to the browser to promote the element to its own GPU layer ahead of time. It uses more VRAM, but it keeps compositing smooth. Use it sparingly — not on every glass card, just the persistent ones.

Fallbacks and Browser Edge Cases

The @supports at-rule is your friend here. Firefox before 122, and Firefox on Linux with hardware acceleration off, won't render backdrop-filter at all — the element just shows its background color without any frosting. A sensible fallback makes the design degrade gracefully.

.glass-card {
  /* Fallback for no backdrop-filter support */
  background: rgba(30, 30, 50, 0.85);
  border-radius: 16px;
}

@supports (backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px) saturate(1.5);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
  }
}

The fallback background should be more opaque and more distinctly colored than your glass version. rgba(255,255,255,0.1) on a white background without blur is invisible — it looks broken, not degraded. Push the alpha up to 0.75–0.85 in the fallback so unsupported browsers still see a readable, styled surface.

For motion sensitivity, backdrop-filter itself is static — no issue. But if you're animating *other* properties on the same element (entrance transitions, hover transforms), wrap those in @media (prefers-reduced-motion: no-preference). The Empire UI) component library handles this automatically in all its glass components, so if you're pulling from there you don't have to think about it.

FAQ

Read next