The frosted-glass panel look — sharp foreground content over a soft, blurred background — has become a signature of modern interface design. backdrop-filter is the CSS property that makes it possible natively, with a few genuinely important details to understand.
1Two Properties, Two Different Targets
filter and backdrop-filter share an identical set of filter functions (blur(), brightness(), saturate(), contrast(), and more), which makes it easy to conflate them — but they apply those functions to fundamentally different things. filter affects the element itself and everything rendered inside it: apply blur(20px) and the element's own text becomes blurry too. backdrop-filter instead affects whatever is visible *behind* the element, leaving the element's own content completely untouched and sharp.
This distinction is the entire mechanism behind the frosted-glass effect: a panel with backdrop-filter: blur(20px) shows perfectly sharp, readable text and icons of its own, floating over a softly blurred version of whatever's positioned behind it.
2No Transparency, No Visible Effect
backdrop-filter's entire mechanism depends on there being something behind the element actually visible through it — which means the element needs at least partial background transparency for the effect to be perceivable at all. A background: white (fully opaque) element with backdrop-filter: blur(20px) applied technically has the property set, but produces zero visible difference, since nothing behind the element is showing through to be filtered in the first place.
The practical pattern is always a semi-transparent background — commonly rgba(255, 255, 255, 0.5-0.7) for a light frosted look, or the dark-mode equivalent with a dark, semi-transparent rgba() value — paired with the backdrop-filter itself.
3Real Cost, And A Stacking Context Side Effect
backdrop-filter is genuinely one of the more GPU-intensive CSS effects, because unlike a static filter applied once, the browser has to continuously recompute the blurred/filtered version of whatever's behind the element as that background content scrolls, animates, or otherwise changes — this cost compounds on pages with many backdrop-filtered elements simultaneously visible, or on lower-powered devices.
A second, less obvious detail: applying backdrop-filter creates a new stacking context on that element, exactly the same way transform or opacity do. This is a real side effect worth being aware of — a child element inside a backdrop-filtered container with a high z-index is now stacked relative to that new context, which can produce z-index behavior that surprises a developer who wasn't expecting the stacking context to have changed.
4Step-by-Step Breakdown
Filtering What's Behind, Not The Element Itself. filter applies visual effects to an element and its own content. backdrop-filter does something distinct: it applies those same effects — blur, saturation, brightness — to whatever is visible *behind* the element, through it, producing the frosted-glass look now common in modern OS interfaces and app design.
filter vs backdrop-filter: What's Actually Being Filtered. filter: blur(20px) blurs the element itself and everything inside it. backdrop-filter: blur(20px) leaves the element's own content sharp, and instead blurs whatever content is positioned behind it and showing through — a semi-transparent panel with crisp text over a blurred, frosted background.
filter vs backdrop-filter. If a panel with sharp, readable text has backdrop-filter: blur(20px) applied, what actually becomes blurred?
- →The panel's own text and content
- →Whatever content is positioned behind the panel, visible through its semi-transparent background
- →Nothing — backdrop-filter has no visible effect without filter also applied
The Transparency Requirement. backdrop-filter is invisible without some transparency on the element itself — if the background is fully opaque, there's nothing behind it visible to actually filter. A semi-transparent background color (rgba() or a partial-opacity solid) is what makes the underlying, filtered content actually show through.
The Transparency Requirement. Why does backdrop-filter have no visible effect if the element's background is fully opaque?
- →It's a browser rendering bug that needs a workaround
- →With a fully opaque background, no underlying content is visible through the element at all, so there's nothing for the filter to visibly affect
- →backdrop-filter always requires filter to also be present
The Real Performance Cost And Stacking Context Side Effect. backdrop-filter is genuinely GPU-intensive since the browser has to continuously re-render and blur the actual content behind the element as it changes (during scroll, animation, or any repaint behind it) — and applying it also creates a new stacking context, which can subtly change how child z-index values behave, a side effect worth being deliberate about.
backdrop-filter's Side Effects. Besides its GPU rendering cost, what other, less obvious side effect does applying backdrop-filter to an element have?
- →There are no other side effects beyond the rendering cost
- →It creates a new stacking context on that element, which can affect how child z-index values are interpreted
- →It automatically removes any transparency the element had
backdrop-filter Mastered. You now understand exactly what backdrop-filter filters (what's behind the element, not the element itself), why background transparency is required for any visible effect, and both its genuine GPU performance cost and its stacking-context side effect — everything needed to use the frosted-glass effect deliberately, not accidentally.
Blur What's Behind An Element. backdrop-filter applies a filter effect to whatever is visible behind an element, not the element itself.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Text Placed Over A backdrop-filter Effect Still Needs Verified Contrast Against The Filtered, Blurred Background
The blur can actually help or hurt contrast depending on what's behind it — always verify actual rendered contrast against the real, filtered background rather than assuming the effect is automatically safe.
2backdrop-filter Should Be Included In prefers-reduced-transparency Handling Where Supported
For users who've indicated a preference for reduced transparency (a related but distinct preference from reduced motion), consider providing a more opaque, non-blurred fallback background.
SEO Implications
- 1
backdrop-filter's GPU Cost Can Measurably Affect Scroll Performance On Pages With Multiple Instances
Multiple simultaneously-visible backdrop-filtered elements, especially during scroll, can create real frame-rate pressure worth profiling, directly relevant to interaction responsiveness metrics.
- 2
The Stacking Context Side Effect Can Cause Layout Bugs That Take Debugging Time To Resolve If Not Anticipated
An unexpected z-index behavior caused by backdrop-filter's stacking context creation is a real, if avoidable, source of debugging time that a forewarned developer can sidestep entirely.
Best Practices
Always Pair backdrop-filter With An Explicitly Semi-Transparent Background Color
Without it, the property has literally no visible effect — this pairing should be treated as a single, inseparable pattern, not two independent decisions.
Limit The Number Of Simultaneously-Visible backdrop-filter Elements On Performance-Sensitive Pages
Given its genuine GPU cost, especially during scroll, reserve it for a small number of deliberate, high-value UI moments (a sticky header, a modal) rather than applying it broadly across many elements at once.
Frequent Bugs
backdrop-filter is applied but produces no visible frosted-glass effect at all.
Check whether the element's background is fully opaque — backdrop-filter requires at least partial transparency to have any visible effect.
A child element's z-index stops working as expected after backdrop-filter was added to its parent.
backdrop-filter creates a new stacking context on the parent; the child's z-index is now scoped relative to that new context, which can change its apparent stacking behavior relative to unrelated elements.
Real-World Examples
A Frosted Sticky Header
A site header that stays fixed during scroll, using backdrop-filter and a semi-transparent background so content scrolling beneath it remains partially, softly visible rather than being fully hidden by an opaque bar.
.site-header {
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
}