CSS backdrop-filter Playground — Free HTML CSS JS Snippet

The "frosted glass" look — a translucent panel that blurs and enriches whatever sits behind it, like macOS's Control Center or iOS's Control Panel — was, for years, impossible to reproduce faithfully on the web. Developers approximated it with a semi-transparent background: rgba(...) color, which dims what's behind a panel but never actually blurs it, producing a flat, muddy look nothing like real frosted glass. The backdrop-filter CSS property, standardized in the CSS Filter Effects Module Level 2 spec, closes that gap by applying filter functions — the same blur(), saturate(), brightness(), contrast(), and others already available via the regular filter property — directly to whatever content is rendered behind an element, rather than to the element's own contents.

How backdrop-filter differs from filter

The standard filter property (also part of Filter Effects) applies its functions to an element and its own descendants — blur a filter: blur(8px) div and everything drawn inside that div gets blurry, but the page behind it stays crisp. backdrop-filter inverts this: the element itself (and its content) stays perfectly sharp, while the filter is applied to a snapshot of whatever is rendered underneath it, continuously, as that background content scrolls, animates, or changes. This is what makes it possible to have perfectly legible white text sitting on top of a blurred, colorful background simultaneously — something the regular filter property alone could never achieve, because blurring the container would blur the text right along with it.

Why blur() and saturate() are used together

A frosted-glass effect almost always combines two filter functions in the same declaration: blur(Npx) softens the fine detail of whatever is behind the panel into indistinct color fields, while saturate(P%) (values above 100% intensify color vividness) compensates for the perceptual "washing out" that blurring alone tends to cause, keeping the glass panel feeling vibrant rather than murky. Real operating system implementations of this effect (Apple's UIVisualEffectView, Windows' Acrylic material) use this exact blur-plus-saturate combination internally, which is why matching both properties together, rather than blur alone, is what actually reads as "glass" instead of just "blurry."

Technical implementation and browser support

Under the hood, applying backdrop-filter to an element creates a new stacking context and forces the browser to continuously re-composite a filtered copy of the background layer beneath that element on every frame it's visible — a genuinely expensive GPU operation compared to a static rgba() background, which is one reason it's best reserved for a small number of prominent UI surfaces (a nav bar, a modal, a floating card) rather than applied broadly across a page. Support has existed in Safari since version 9 (with the -webkit- prefix still recommended alongside the unprefixed property for maximum compatibility) and in Chrome/Edge since version 76; Firefox shipped unprefixed support in version 103 (2022), meaning as of 2025/2026 it is safe to use in production for any project that doesn't need to support genuinely ancient browser versions, especially when paired with a plain background-color fallback for the rare unsupported client.

What this playground demonstrates

Two sliders build a live backdrop-filter: blur(Npx) saturate(P%) declaration applied directly to a card floating over a deliberately busy, multi-color radial-gradient background, so the blur and saturation effects are immediately obvious against the colorful backdrop. The exact generated CSS string is echoed as literal text so you can copy it straight into a stylesheet. A comparison toggle swaps the card to a "flat" mode using only background: rgba(30,30,46,0.55) with backdrop-filter: none — visually, the flat card simply darkens the busy background uniformly, with all of its color and detail still sharply visible through the translucency, while the frosted card genuinely obscures fine background detail into soft color fields, which is the entire visual and functional difference the two techniques exist to communicate.