Field notes
Apple's glass effect looks like ten lines of CSS in every tutorial. I built it for my own site and found three things no tutorial mentions, each of which quietly breaks the effect in Chromium. Everything I learned is here, with sliders to try it yourself.
Everything on this page is live. Move the sliders below and the navigation at the top changes too, it runs on the same code.
Frosted glass scatters light, a blur behind a translucent surface, done. Liquid Glass bends light. At a curved edge a ray changes direction, so the background appears shifted, stretched and, at the strongest curvature, upside down.
You only notice the difference once something moves behind the glass. Drag the text through both surfaces and watch the edges.
The effect runs on an SVG filter attached to the element as a backdrop-filter. A displacement map tells every pixel how far to move. Sounds simple. In practice I hit three traps that share one symptom, it looks vaguely glassy but is physically wrong.
To stop the map from showing on top of the element, people export it with alpha 0. That is exactly what kills it. Skia premultiplies the colour channels by alpha while decoding, and at alpha 0 nothing is left. The filter then shifts everything by a constant diagonal amount. Add some blur and it convincingly resembles refraction, but it is just an offset. The correct way is alpha 255 plus a filter graph whose final step does not output the map.
Chromium clips the backdrop to the element box. Whatever sits next to it is unreachable, no matter how far you sample. Everything beyond the edge is mirrored back at the edge. That is not a limitation but the trick: sample deliberately past the edge and you get the inside content mirrored back, which is exactly the upside-down look real glass produces.
Replace a filter definition under the same ID and Chromium happily keeps rendering the old one. I spent a while hunting values that had been right for ages and simply never arrived. Every rebuild gets a fresh ID now.
The obvious solution is a linear ramp, lots of displacement at the edge, less towards the centre. The result looks like a sheared copy, not like glass. A real lens does not stretch evenly. Towards the fold the stretching keeps increasing until the image flips over. That is the same caustic you see in a water droplet on a window.
So instead of describing the displacement, I describe the source position as a smooth two-zone curve. On the outside it reads behind the edge, which gives the mirrored band. Stretching peaks at the fold. After that it eases out until the centre is one to one again. The curve is strictly monotonic, so content never disappears anywhere.
These are all the parameters I used to dial in the effect. They apply to the pill below and to the navigation at the top. Drag the sliders, push the background through and watch what happens.
Small type scrolling under a glass bar flickers at the edge. Apple does not solve this geometrically but with a dedicated layer that dissolves the content beforehand. The same layer runs under the navigation on this page.
On touch the material lights up where the finger sits and spills faintly onto neighbouring glass. Move your mouse across the pill in the lab and you will see it.
Apple's glass never fades in via opacity. Instead the refraction ramps up and the element materialises. It costs nothing because only a single attribute is animated.
A fully opaque button on glass breaks the illusion instantly. Tinted surfaces stay translucent and adapt their brightness to the background. The blue button in the navigation above is built exactly that way.
Real refraction inside backdrop-filter only runs in Chromium, so Chrome, Edge and Brave. Safari and iOS do not support SVG filters in this position, a known open WebKit bug rather than a question of correct syntax.
On iPhone a second variant runs instead, a clear centre plus a dark, softly fading rim with its own backdrop filter. It is not refraction, but it carries the same silhouette and barely stands out in a direct comparison.
Accessibility belongs in here, not in an appendix. Anyone who has reduced transparency enabled gets a solid surface. With increased contrast the glass turns into a calm surface with a clear outline, and with reduced motion the travelling light and the glow stand still. Text contrast is measured after the blur, not before.
The map probably has an alpha channel of 0. Chromium premultiplies the colour channels by alpha while decoding, so at alpha 0 nothing is left. The filter then shifts everything by a constant diagonal amount, which with some blur resembles refraction without being it. The correct approach is alpha 255 combined with a filter graph whose final step does not output the map.
No. Chromium clips the backdrop to the element box, so anything outside is unreachable via backdrop-filter. Samples beyond the edge are mirrored back at the edge. That behaviour is exactly what produces the upside-down look when you deliberately sample past the edge.
Chromium caches filter definitions by ID. If you replace the filter element under the same ID, it keeps rendering the old definition. The fix is to assign a fresh ID on every rebuild and update the backdrop-filter value accordingly.
The real refraction does not. Safari and iOS do not support SVG filters inside backdrop-filter, which is an open WebKit bug. A second variant works well there, with a clear centre and a dark, softly fading rim carrying its own backdrop filter. The silhouette stays the same and the difference is barely noticeable in practice.
Only with care. Text contrast has to be measured after the blur, not before. Three system settings need to be respected as well: reduced transparency gives a solid surface, increased contrast a calm surface with a clear outline, and reduced motion switches off the travelling light and the glow.
For most sites good frosted glass is enough, and that is the more honest answer. The work here sits in the navigation layer, in bars, floating buttons and overlays, exactly where Apple allows it too. It has no place inside content, where it eats performance and costs legibility.
If you want something like this for your project, or you are simply curious how far browsers can be pushed, get in touch.
The physical groundwork comes from kube.io's article on refraction with CSS and SVG and from Apple's own WWDC material about the material itself. The Chromium findings on this page are my own measurements, taken with a colour-stripe ruler behind the glass and screenshots in pixel steps.