Liquid Glass JS
A WebGL JavaScript library that recreates Apple's Liquid Glass UI on the web — real-time refraction, blur, and masking —
dashersw/liquid-glass-js. Source: github.com/dashersw/liquid-glass-js, 2026-06-15
What it is
dashersw/liquid-glass-js (~430★, MIT, by Armagan Amcalar) renders Vision Pro-style glass with multi-layer WebGL shaders: each glass element samples the page background (via html2canvas) and applies edge/rim refraction, a 13×13 Gaussian blur, shape-aware normals, and tint. Three shapes (rounded rectangle, circle, pill), nested glass (children sample the parent's output), live parameter control, zero build step, zero dependencies (except html2canvas). Source: github.com/dashersw/liquid-glass-js README, 2026-06-15
const container = new Container({ borderRadius: 24, type: 'pill', tintOpacity: 0.3 });
document.body.appendChild(container.element);
Alternative: @ybouane/liquidglass applies the same refraction/chromatic-aberration/Fresnel effect to any HTML element via a data-config attribute. Source: github.com/ybouane/liquidglass, 2026-06-15
Jesse Vermeulen's menu video is the visual target for the material: a translucent menu/dropdown surface whose thick edges and background distortion remain legible as groups change. Use it to judge whether an implementation feels like live lensing instead of a frosted blur rectangle. Source: X/@jesse_vermeulen and local video review, 2026-07-04
Outpace SVG Filter Variant
Outpace's Liquid Glass for the Web writeup demonstrates a no-WebGL route: model a squircle-like dome, compute displacement from Snell's law, and apply it with SVG feDisplacementMap. The browser constraint is the interesting part: live backdrop-filter plus SVG displacement is Chromium-only, so the portable trick is filtering a copied backdrop with ordinary CSS filter. Use this when a project needs the material idea without a full page-sampling WebGL layer. Source: Outpace, 2026-06-24
When to use
The real-lensing version of glass — beyond the cheap backdrop-filter: blur() recipe — for floating chrome (nav, dock, control panels, modals). Heed the accessibility fault line from Liquid Glass vs Flat 2026: glass for floating chrome only, never body text or dense data UI; put a solid scrim behind any text on glass; honor prefers-reduced-transparency / prefers-reduced-motion. WebGL page-sampling is expensive — confine it to small surfaces. For metal instead of glass, see Liquid Logo (Paper Shaders Liquid Metal).
Timeline
- 2026-07-04 | Added Jesse Vermeulen's local video review as the visual target for menu/dropdown liquid glass: thick refractive edges plus background lensing, not merely blur. Source: X/@jesse_vermeulen, 2026-06-21
- 2026-06-25 | Added Outpace's SVG-filter implementation as the lighter companion technique to WebGL liquid glass: copied backdrop +
feDisplacementMap, because SVG displacement insidebackdrop-filteris not broadly portable. Source: https://glass.outpacestudios.com/ - 2026-06-15 | Added (Kevin) — WebGL Apple-Liquid-Glass library; cross-linked to the Liquid Glass vs Flat 2026 design-language analysis. Source: User, 2026-06-15; github.com/dashersw/liquid-glass-js