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
- Next-level frosted glass with backdrop-filter • Josh W. Comeaujoshwcomeau.com
- Experiments in procedural dappled light shadersjzhao.xyz
- Cameras and Lenses – Bartosz Ciechanowskiciechanow.ski
- Crafting the Next.js Websiterauno.me
- Frank Chimero · The Web’s Grainfrankchimero.com
- Liquid metal — Animated metal shader effectmetal.jakubantalik.com
- Unicorn Studio — No-code WebGL Toolunicorn.studio
- Shading Motion - The Blog of Maxime Heckelblog-git-motion-post-maxime-heckels-projects.vercel.app
- On Rendering the Sky, Sunsets, and Planets - The Blog of Maxime Heckelblog.maximeheckel.com
- Murmur for the webmurmur.krispuckett.com
- Text Rendering Hates You - Faultlorefaultlore.com