liquid-glasslisted

# Liquid Glass Glass is **two layers, and the CSS one is not the interesting one**. 1. **CSS** paints the tint and the **rim** — a near-transparent white→gray gradient plus three inset highlights that read as a polished edge. This is what most "glassmorphism" snippets stop at. 2. **Refraction** bends the backdrop through the panel's edge, the way real glass does: a displacement map baked per element and consumed as `backdrop-filter: url(#filter)`. This is what makes it *liquid* rather than a blurred rectangle. They ship as a pair — a class and a directive on the same element: ```html <div class="liquid-glass" appLiquidGlass>…</div> ``` `assets/liquid-glass.css` is the CSS layer, self-contained (its own tokens, light and dark). `assets/liquid-glass.directive.ts` is the refraction layer for Angular. Any other framework: port it, see [`references/refraction.md`](references/refraction.md) — the port is transcription, not design. ## The four rules Each of these has one failure mode, and in every case the browser shows you something plausible instead of an error. ### 1. Glass needs a backdrop. Build it first. Glass shows *what is behind it*. Behind a flat background there is nothing to show, so the panel renders as a faintly outlined gray box and the effect reads as broken — which sends people reaching for more blur and more opacity, the exact move that kills it. So the ambient mesh is **part of the recipe, not decoration**: off-screen radial glows in a few hues (violet /