Liquid glass for the web · Outpace Studios
Every way to put liquid glass on the web — and the one that truly refracts in Safari and Firefox, not just a Chrome-only blur. The technique, the code, the engine.
Glass refracts. Light passing through it bends, hardest where the surface curves down at the rim, so the world behind a pane warps and brightens along its edge. That bend is the whole tell. Take it away and you have a frosted panel, which is what nearly every “liquid glass” on the web actually is: a blur with a bright border. Blur isn’t glass. We wanted the bend itself, computed from the optics rather than faked with a gradient, and working in every browser, Safari and Firefox included, not just Chromium. This walks through both halves: the physics that shapes the refraction, and the one…
saved by
related reading
- Gavin Nelson, Designernelson.co
- Shadersshaders.com
- Next-level frosted glass with backdrop-filter • Josh W. Comeaujoshwcomeau.com
- The online home of Maxime's workmaximeheckel.com
- Paper Shaders – Ultra-fast zero-dependency shadersshaders.paper.design
- On Rendering the Sky, Sunsets, and Planets - The Blog of Maxime Heckelblog.maximeheckel.com
- Cameras and Lenses – Bartosz Ciechanowskiciechanow.ski
- Optics basics: refraction | Skulls in the Starsskullsinthestars.com
- MAKING SOFTWAREmakingsoftware.co
- Lights and Shadows – Bartosz Ciechanowskiciechanow.ski
- The Book of Shadersthebookofshaders.com
- Temporal Glare: Real-Time Dynamic Simulation of the Scattering in the Human Eyeihrke.github.io