Liquid Glass
Apple's 2025 visionOS/iOS design language — an evolution of glassmorphism with dynamic refraction, chromatic aberration hints, and fluid-like borders that respond to content behind them.
Plain English
Liquid Glass is the next generation of frosted glass UI, introduced by Apple for visionOS and carried into iOS 26. Where glassmorphism uses a simple backdrop blur to hint at transparency, Liquid Glass layers in physical optical effects: refraction (the background warps slightly at the edges of the panel, as if bending through a lens), chromatic aberration (a barely-perceptible split of the border into spectral colors, like a prism edge), and specular highlights (a bright glint that moves as the light source — in spatial computing, your head — shifts position). The result looks genuinely like a piece of curved glass floating in space rather than a flat panel with a blur filter. The technique requires heavier blur values than classic glassmorphism (24–40px vs 8–16px), a more luminous border, and often an SVG filter or WebGL shader to achieve the refraction distortion. On the web it is approximated with layered SVG feTurbulence + feDisplacementMap filters for the refraction edge and a gradient border for the specular highlight.
Technical
CSS approximation — outer glow: box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 8px 32px rgba(0,0,0,0.25); backdrop-filter: blur(32px) saturate(180%); background: rgba(255,255,255,0.12). Specular border: border: 1px solid transparent; background-clip: padding-box + a ::before pseudo-element with background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.1)) as the border-image source. Refraction edge: SVG filter with feTurbulence (baseFrequency: 0.015, numOctaves: 2) fed into feDisplacementMap (scale: 8) applied to the blurred backdrop. Full implementation requires either WebGL (Three.js MeshPhysicalMaterial with transmission + roughness) or a Canvas-based displacement approach. Performance: blur values above 24px are expensive — limit to 1–2 panels on screen simultaneously. GPU compositing required; avoid inside scroll containers.
Live Demo
Liquid Glass vs Glassmorphism
Liquid Glass (Apple's 2025 design language) pushes glassmorphism further: stronger blur, inner glow, and dynamic border light.
Regular Glass
Premium Feature
Unlock the full design system with advanced tokens.
Liquid Glass
Premium Feature
Unlock the full design system with advanced tokens.
Regular Glass
blur(10px)
rgba(255,255,255,0.15)
Liquid Glass
blur(32px) + saturate
inner glow + shadow
The key difference: inner box-shadow adds a top-edge light reflection, mimicking real glass.
Usage
✓ Good usage
A visionOS-style control panel floating over a vibrant scene — deep blur at 32px, a bright specular glint in the top-left corner, and subtle edge refraction that makes the panel read as a physical object with volume.
✗ Bad usage
Applying Liquid Glass to a data table on a plain white background — without vivid, colorful content behind the panel, the heavy blur and specular effects have nothing to interact with and the panel looks dirty rather than glassy.
Recommended values
- Backdrop blur: 24–40px (heavier than standard glassmorphism)
- Background opacity: rgba(255,255,255,0.08–0.14)
- Border luminosity: rgba(255,255,255,0.45–0.65)
- Specular highlight gradient: 135deg, white 0%, transparent 60%
- Refraction displacement scale: 6–12px at edges
- Saturation boost: saturate(160–200%) alongside the blur
Common mistakes
- Blur values too high on a content-heavy page — backdrop-filter: blur(40px) on six simultaneously visible panels causes severe GPU memory pressure and drops frames to under 30fps on mid-range devices.
- Missing the specular highlight — Liquid Glass without the bright top-left border gradient looks like slightly-over-blurred glassmorphism; the specular is what communicates the curved glass surface.
- Overusing refraction on text containers — displaced text edges during scroll make copy illegible; refraction should only affect the panel border, never the content area.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Create a Liquid Glass card component for the feature highlight section. Set backdrop-filter: blur(32px) saturate(180%) and background: rgba(255,255,255,0.10). Add a luminous border using a ::before pseudo-element with a linear-gradient from rgba(255,255,255,0.65) at 135deg to transparent, used as a border-image. Add a specular inner highlight — a ::after pseudo-element at the top-left corner, radial-gradient from rgba(255,255,255,0.4) to transparent, 60% × 40% size. Place the card over the aurora background from the hero section so the blur has colorful content to work with. Limit to a maximum of two Liquid Glass panels visible simultaneously.