Liquid Glass
/ Spatial Depth
Glass as a real optical material, not a blur. Light passes through the surface and comes out changed — refracted, fringed, lensed. The flex is the physics, not the frost.
⚠ Non-Chromium engine detected — degraded to legible frost fallback (SVG displacement in backdrop-filter is Chromium-only).
Every glass tint is derived in OKLCH from a single base hue (250, blue) so the system never clashes. The background supplies the saturation; the glass stays near-neutral with a directional cast.
Glass is the spectacle; type stays disciplined. Apple's own move after the legibility backlash was toward weight and opacity. One weight step heavier than you'd use on a solid background — thin strokes die against refraction.
Body text never sits directly on live-refraction glass. It sits on a glass panel with a local scrim that clears APCA Lc 60 against the worst-case refracted background, not the best case. The refraction reads as lensing of the field behind, while the words stay sharp.
IOR 1.5000 displacement.scale 46px concurrent_live_panels 3 APCA Lc 62
Drag the glass cards over the moving stripes. Track the specular with your cursor. Tilt the depth stack. Each demo is the real material — same SVG displacement filter, same Fresnel edge, same tracking shine used across the page.
over the field
what's behind
blue the opposite
the shine follows
Real refraction, not blur
SVG feDisplacementMap bends the background through the panel; IOR ≈ 1.5 modeled, not faked.
Chromatic-aberration edges
Red one side, blue the other, via Fresnel-weighted opacity masks.
Tracking specular highlight
A moving shine that follows cursor and scroll — the "light catches the surface" moment.
Depth-layered floating UI
Concentric grouped controls on staggered z-planes; parallax reinforces the layers.
OKLCH harmonic tints
Every tint derived from one base hue; the background supplies the saturation.
Graceful fallback to frost
Non-Chromium degrades to a higher-opacity tinted blur that still passes contrast. The fallback is a feature.
The strongest validation signal possible: Apple and Samsung independently shipped a flagship OS material both literally call "Liquid Glass" in the same cycle. When two platform owners land on the same named aesthetic, it's a movement, not a fad.
Apple Liquid Glass — iOS 26 / macOS Tahoe / visionOS 26
The reference implementation: translucent material that refracts and lenses background content, depth-layered floating controls, liquid-drop motion reacting to device tilt. Apple raised nav-bar opacity + added transparency controls after legibility criticism.
apple.com/newsroom · WWDC 2025-06-09Apple "New Design Gallery 2026" — 18-app adoption showcase
Proof the material crossed from OS chrome into shipping product design: AllTrails, CARROT Weather, Fantastical, Kroger, FotMob, Monzo, Trello, Le Monde — floating translucent toolbars and color-adaptive glass buttons over content canvases.
developer.apple.com/design/new-design-gallery-2026Samsung One UI 8.5 "Liquid Glass" / Ambient Design
A second platform owner shipping the same named material independently: frosted glass layers, physics-based animations, pill-shaped controls, floating nav bars. The corroboration that elevates Liquid Glass from "Apple thing" to "2026 movement." Galaxy S26, June 2026.
design.samsung.com/global/contents/one-uilucky.graphics — "High-Performance Refractive UI in 2026"
The canonical web build thesis: IOR modeling (glass ≈ 1.5), chromatic aberration via spectral gradients, Fresnel via variable-opacity edge masks, a 3-layer composite (Base Refractor / Chromatic Fringe / Specular Shine), GPU caps (~3 concurrent panels max), OKLCH harmonic tints, APCA contrast.
lucky.graphics/learn/liquid-glass-css-glassmorphism-tutorialkube.io — "Liquid Glass in the Browser: Refraction with CSS and SVG"
The implementation receipt: a visible DOM element + hidden SVG feDisplacementMap filter + hidden canvas, with backdrop-filter pointing at the SVG filter ID. Documents the hard constraint — only Chromium exposes SVG filters to backdrop-filter; Safari/Firefox fall back to plain blur. This board follows that exact recipe.
kube.io/blog/liquid-glass-css-svgCraft-press calls "liquid glass" exhausted — but that fatigue is with the cheap blur-card me-too version. The OS-level reality, with legibility and fallback baked in, is what makes this credible rather than eye-candy.
backdrop-filter: blur() as a stand-in for refraction — the explicit 2026 quality failure.@supports degradation to legible frost is a hard deploy gate.