Liquid Glass for the Web
Outpace Studios' browser-compatible liquid-glass technique: compute the refractive bend, then filter a copy of the backdrop instead of relying on Chromium-only
backdrop-filterSVG displacement. Source: Outpace Studios, https://glass.outpacestudios.com/, accessed 2026-06-25
Routing Summary
Use this technique for floating chrome, docks, popovers, and short-lived panels when the design direction actually calls for glass. Route implementation through Frontend and Design Skills, Liquid Glass JS, and Liquid Glass vs Flat 2026 so accessibility, browser compatibility, and dense-text hazards are handled first.
Technique
Outpace models the glass surface as a convex squircle dome. For each pixel it computes the sideways bend from Snell's law, stores offsets in an SVG displacement map, then applies feDisplacementMap. The important browser insight: filter a copy of the backdrop with ordinary CSS filter, not the live backdrop with backdrop-filter, because SVG displacement in backdrop-filter only works reliably in Chromium. Source: Outpace Studios, 2026-06-25
Visual Target
Jesse Vermeulen's earlier video artifact is useful as a material target: a nav/menu surface with translucent rounded dropdowns, thick refractive edges, background lensing, and specular highlights as the menu groups change. Treat it as a reference for how glass should behave in motion, not as implementation authority by itself. The implementation authority remains the Outpace writeup and the library tradeoffs in Liquid Glass JS. Source: X/@jesse_vermeulen and local video review, 2026-07-04
Kevin Guardrail
This is a technique for floating chrome, menus, docks, and short-lived panels. It should not be applied behind dense text or data. Pair it with the accessibility guidance in Liquid Glass vs Flat 2026 and the library tradeoffs in Liquid Glass JS. Source: Liquid Glass vs Flat 2026; User design defaults
Timeline
- 2026-07-04 | Reviewed Jesse Vermeulen's liquid-glass menu video and captured it as a visual target for live web glass: refractive dropdown edges, background lensing, and menu-state material continuity. Source: X/@jesse_vermeulen, 2026-06-21
- 2026-07-04 | Source-reviewed the Outpace writeup from the root bookmark: the durable implementation route is computed refraction offsets in an SVG displacement map, filtering a copied backdrop instead of relying on SVG displacement inside
backdrop-filter, plus WebKit-specific blob URL, sRGB, filter-id, and source-size guardrails. Source: Outpace Studios, 2026-06-24 - 2026-06-24 | Jesse Vermeulen shared the Outpace writeup. Source: X/@jesse_vermeulen, https://x.com/jesse_vermeulen/status/2069764589969957138
- 2026-06-25 | Page created from Kevin's X bookmark sync. Source: raw/x-bookmarks/enriched/2069764589969957138.json