# Liquid glass

Also called: Apple liquid glass, iOS 26 glass, refractive UI, lensing glass  
Era: 2025 onward (Apple WWDC 2025)  
Page: https://designforai.dev/style/liquid-glass

## Traits

- glass that behaves like a lens: edges refract and brighten, the middle stays clear
- specular highlight along the top edge, subtle dark rim on the bottom
- panels are pill or capsule shaped, and float over content instead of framing it
- controls morph and merge (a tab bar becomes a single pill when scrolling)
- background is real content (photos, maps), not decorative blobs
- very high radius (full pills), thin type, tight controls
- motion is fluid and physics-based: springy, quick, with slight overshoot

Palette: content-driven, but chrome uses rgba(255,255,255,0.18) fill, rgba(255,255,255,0.6) top highlight, rgba(0,0,0,0.12) bottom rim, #0a84ff accent, #ffffff text on dark, #1c1c1e text on light

Type: system sans (SF Pro on Apple; use Geist as free stand-ins); labels 500 at 13-15px, titles 600 at 22-34px; letter-spacing slightly negative on titles

## Do

- layer glass controls over rich imagery; the effect lives on the refraction of what is behind it
- build the highlight with two inset box-shadows (light top, dark bottom) plus a faint outer glow
- use spring easing (cubic-bezier(0.34,1.56,0.64,1)) at 350-450ms for morphs

## Don't

- do not use it for large containers; liquid glass is for controls and floating bars, not page sections
- do not drop legibility for effect; add a dim scrim under text when the background is busy
- do not fake it with a flat 10% white; the edge treatment is the entire style

Known for it: Apple iOS 26 / macOS Tahoe, Apple Music and Maps toolbars

## CSS seed

```css
:root{--bg:#101418; --fg:#ffffff; --accent:#0a84ff; --glass:rgba(255,255,255,0.18); --hi:rgba(255,255,255,0.6); --rim:rgba(0,0,0,0.14); --radius:999px; --font:'Geist',sans-serif}
```

## Prompt

Build the site in Apple liquid glass style. Content is full-bleed photography or a map; all chrome floats over it in capsule-shaped panels (border-radius 999px for bars, 28px for sheets). Glass recipe: background rgba(255,255,255,0.18), backdrop-filter blur(24px) saturate(180%), box-shadow inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.14), 0 10px 30px rgba(0,0,0,0.25); add a 1px outer border rgba(255,255,255,0.25). Accent #0a84ff for the active tab and primary button. Font Geist: titles 600 at 28-34px with -0.02em tracking, labels 500 at 14px. Bottom tab bar collapses into a single pill on scroll with a 400ms spring (cubic-bezier(0.34,1.56,0.64,1)). Keep glass for controls only; page sections stay solid. Respect prefers-reduced-motion by disabling the morph.