What breaks when your buttons are made of glass

Liquid Glass is the trend of translucent surfaces with blur and light that responds to whatever’s behind them, meant to communicate depth and hierarchy without cluttering the interface. Done well, it helps separate layers (floating nav, cards, decorative elements) without hard edges. Done badly, it’s just blur with extra steps.

For this site I did it with backdrop-filter: blur() saturate(), applied to the nav, to card hover states, and to a decorative badge. Never to long post text: there, legibility always wins.

The first attempt had a bug that almost passed as a feature

The first version stacked an SVG refraction filter (feTurbulence + feDisplacementMap) on top of the blur, to simulate the surface distorting what’s behind it. It passed every test: the filter was in the DOM, the CSS applied it where it should, zero console errors. I shipped it, and looking at it live it read as a rendering glitch, not as glass. Nobody reported it as a bug because technically it wasn’t one: it did exactly what the code said it should do.

That’s the underlying problem: an automated test validates that the code does what it says, not that what it says is correct. Zero automated coverage is going to tell you “this looks ugly.” I pulled it from the whole site the moment I saw it in a real browser, not in a test report. The lesson isn’t “don’t trust your tests,” it’s that there’s a category of bugs (visual perception, feel, tone) that only human review in a real environment catches, no matter how good your suite is.

Visual regression: what to compare when the effect is subtle

With plain blur (no distortion) the visual regression problem changes shape: there’s no more random noise rendering differently between runs, but backdrop-filter can still differ at the subpixel level across browser engines or Chromium versions. An exact pixel-perfect diff is too brittle for this; a pixel-difference threshold in your regression tool is the better call, not an exact comparison.

Browser support: backdrop-filter isn’t even everywhere

backdrop-filter has good support in modern browsers, but it isn’t universal (Firefox supported it late, some older mobile browsers just don’t apply it, no visual fallback). It’s worth a simple functional test confirming the nav stays legible and usable without the effect (for example, forcing the class with backdrop-filter stripped out), instead of relying on the effect looking the same everywhere.

Dynamic contrast: the background changes, the text doesn’t

A glass element doesn’t have a fixed background color: what shows through changes with scroll. Text that has good contrast over the turquoise background blob can lose contrast over a lighter part of the page. That’s hard to catch with an automated static-contrast test (which only evaluates a single moment), so I treat it as a manual review checklist item: test the glass element at at least three different scroll positions before merging.

prefers-reduced-motion matters even with no animation

The blur doesn’t animate, it’s a static effect, but for someone sensitive to visual motion the sense of depth/parallax can still bother them. It’s worth reviewing how each glass surface looks under prefers-reduced-motion: reduce, and that’s an easy check to skip if your accessibility checklist only greps the CSS for transition/animation.