Everyone wants the lens right now — the Apple-style glass where content doesn't just blur behind a surface but visibly bends around its rim. And you can build it on the web today: SVG displacement filters plugged into backdrop-filter produce a genuinely convincing lens.
Here's the problem: backdrop-filter: url(#some-svg-filter) works in exactly one engine family. Safari ignores it. Firefox does something worse — it parses it as valid, then renders nothing, which turns your beautiful glass panel into a fully transparent hole with text floating over whatever's behind it. And even where it works, it costs real GPU time that a phone doesn't want to spend.
So the question isn't "how do I build liquid glass." It's "how do I ship liquid glass to the users who can render it without shipping a broken page to everyone else." The answer that ended up in the design system I've been building is a ladder — four tiers of glass, each falling through to the one below automatically:
| Tier | What it is | Gate |
|---|---|---|
| 2 — geometric lens | per-element displacement map matched to the surface's shape | opted-in signature surfaces only |
| 1 — noise warp | one global SVG turbulence filter — the "liquid" wobble | Chromium, confirmed at runtime |
| 0 — blur + saturate | plain CSS backdrop-filter: blur() saturate()
|
@supports (backdrop-filter: …) |
| — opaque surface | a solid background color | none — this is the floor |
A surface that opts into the lens but runs on Firefox falls back to the noise warp's gate, fails that too, and lands on plain blur. A browser with no backdrop-filter at all gets a solid, fully readable panel. Nothing configures this per-surface; the gates compose. You can't regress anything — each tier only ever adds on top of what's already there.
The rest of this post is the four decisions that made the ladder actually work, because the tier table is the easy part.
1. Never trust url() in backdrop-filter — gate it twice
The naive version writes the SVG filter reference straight into the stylesheet. Two real failures come out of that:
-
Firefox accepts the declaration as syntactically valid — so your
@supportschecks pass — and then renders nothing. The surface becomes transparent. This is the nastiest kind of cross-browser bug: not a missing enhancement, an actively broken page. - Chromium has a race: if the CSS references the filter before the SVG node is hydrated into the DOM, the surface flashes transparent on load.
The fix is to never let CSS reference the filter unconditionally. The stylesheet keys the tier-1 rule on an attribute — html[data-liquid-glass] — and a tiny runtime sets that attribute only after two things are true: the SVG filter is actually in the DOM, and the engine is one that can render it. CSS stays declarative, the gate is one attribute, and a browser that would break simply never matches the selector — leaving tier 0's plain blur standing.
2. Hold the blur constant across every tier
The ladder upgrades a surface after first paint: tier 0 renders immediately, then the runtime confirms the engine and swaps in the higher tier a few hundred milliseconds later. That lag is harmless only as long as the upgrade is invisible.
The first version I built wasn't. I'd tuned each tier's blur on its own, and they didn't match — the base tier ended up noticeably heavier than the lens. So every page load played out the same way: a surface painted with that heavy frost, then visibly thinned out to a much lighter blur the moment the lens kicked in. The material itself appeared to change mid-load. It read as a glitch, because it was one.
The rule that fixed it: all three tiers share the exact same blur radius. Stepping from tier 0 to 1 to 2 only ever swaps the displacement — the wobble, the rim bend — never the frost amount. Upgrades become invisible; the surface just quietly gains refinement. If you build any multi-tier visual effect, find the parameter the eye anchors on (here: blur) and freeze it across tiers. Degrade and upgrade along every other axis.
3. The lens is for small chrome — and that's a feature
The geometric lens displaces a band along the surface's rounded border. On a small element — a pill-shaped nav bar, a floating control, the circles in the video above — that rim refraction is gorgeous. On a large surface it falls apart in a specific way: any high-contrast straight edge in the backdrop kinks where it crosses the lens's corner, and with nothing to frame that bend it reads as a rendering bug, not as glass.
I learned this the expensive way: I put the lens on modals and a command palette, it looked wrong for exactly this reason, and I pulled it back to the noise warp. The scope rule that survived: tier 2 is opt-in, per signature surface, small chrome only. Tier 1 stays the default for every other glass surface. Not every tier of an enhancement ladder should be a global upgrade — sometimes the top tier earns its place precisely by being rare.
4. Engine and feature aren't the only gates
The full gate list for the lens tier ended up being five conditions, and only one of them is the classic @supports:
-
Feature —
backdrop-filterexists at all (tier 0's gate). - Engine — Chromium, because of the Firefox parse-but-don't-render trap above.
- Material — the surface is actually glass right now. (My system has multiple visual physics (glass / flat / retro), and the lens applies only under glass; switch themes and it releases itself.)
- Pointer — fine pointers only. The lens is a desktop refinement; on touch devices it's GPU cost without payoff, so phones get the noise warp or plain blur.
-
Motion preference —
prefers-reduced-motiondisables the displacement and falls back to the static blur chemistry.
"Progressive enhancement" usually gets shortened to a single @supports query. For filter-level effects, it's a matrix — feature, engine, material, input device, accessibility preference — and the clean way to manage that matrix is exactly the ladder: every gate that fails just drops the surface one tier, and every tier below is already correct.
The demo
The video at the top is one page with three circles over the same scrolling backdrop — tier 0, tier 1, tier 2, side by side. Watch the stripes: under plain blur the edges soften but stay straight; under the noise warp they wobble; under the lens they bend around the rim while the center stays calm. Same markup, same blur radius, three different filters — and on a browser that can't render the fancy ones, all three circles would quietly look like the first.
That's the whole idea. Liquid glass isn't one effect; it's a ladder you let each browser climb as far as it can.
