Most "glassmorphism" is backdrop-filter: blur(). Real glass doesn't scatter light, it bends it: the centre stays clear and the edge pulls the background inward. I wanted that on the web without WebGL
Demo (Chromium): https://vii-cae.github.io/hyalite--liquid-glass/demo/index.html
Repo (MIT): https://github.com/VII-Cae/hyalite--liquid-glass
How it works, in four lines:
- A signed distance field of the element's rounded rect (per-corner radii) gives every pixel its depth from the edge.
- Snell's law on a beveled slab turns depth into a lateral offset. That becomes a displacement map (R = x, G = y, B = rim light), built for the element's exact size.
- One SVG filter: feImage → feGaussianBlur → feDisplacementMap → rim light, applied through backdrop-filter: url(#id). The browser bends whatever is behind the element, live.
- The JS watches the DOM: attach on insert, rebuild after a resize settles, ramp the lensing in ("materialize") instead of fading.
The part I think is actually interesting: every SVG-filter liquid glass I've seen has stair-stepped edges, and it's not the map — Chromium's feDisplacementMap samples with nearest-neighbour (Skia pins it to kNearest, skbug 40045448). A 6× stretch at the rim copies each source pixel into a 6px block. The fix in 0.3.0 splits the field into two displacement passes of ~2.5× each, with a small blur masked to the bevel ring in between. The two tables compose exactly to the one-pass field; the centre never sees the blur. Before/after in the README.
Honest limits:
- Chromium only. Safari drops the SVG part of backdrop-filter (implementation in review), Firefox renders the element unfiltered — so the library writes nothing there and your CSS fallback (a plain blur) wins.
- Each glass surface is its own render layer. A few on screen is fine; hundreds are not.
Would love to hear where it breaks on your layouts.
submitted by /u/Numerous_Animal568