The -morphism family · 2025–present
Liquid Glass
Apple’s dynamic material: glass that refracts and bends the content behind it, reflects light, and reacts to movement.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 15 tokens
- --bg
oklch(96% 0.01 240) - --fg
oklch(20% 0.02 260) - --muted
oklch(42% 0.02 260) - --surface
oklch(100% 0 0 / 0.42) - --surface-2
oklch(100% 0 0 / 0.58) - --border
oklch(100% 0 0 / 0.7) - --accent
oklch(60% 0.2 255) - --accent-fg
oklch(99% 0 0) - --focus
oklch(60% 0.2 255)
| Token | Value |
|---|---|
| --font-body | -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif |
| --font-display | -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif |
| --radius | 28px |
| --radius-sm | 999px |
| --shadow | inset 0 1px 1px oklch(100% 0 0 / 0.95), inset 0 -1px 1px oklch(100% 0 0 / 0.35), inset 1px 0 1px oklch(100% 0 0 / 0.5), inset -1px 0 1px oklch(100% 0 0 / 0.5), inset 0 0 18px oklch(100% 0 0 / 0.35), 0 10px 30px oklch(25% 0.05 260 / 0.16), 0 2px 6px oklch(25% 0.05 260 / 0.1) |
| --shadow-lg | inset 0 1px 1px oklch(100% 0 0 / 0.95), inset 0 -1px 1px oklch(100% 0 0 / 0.35), inset 1px 0 1px oklch(100% 0 0 / 0.5), inset -1px 0 1px oklch(100% 0 0 / 0.5), inset 0 0 18px oklch(100% 0 0 / 0.35), 0 30px 70px oklch(20% 0.05 260 / 0.3) |
:root {
--bg: oklch(96% 0.01 240);
--fg: oklch(20% 0.02 260);
--muted: oklch(42% 0.02 260);
--surface: oklch(100% 0 0 / 0.42);
--surface-2: oklch(100% 0 0 / 0.58);
--border: oklch(100% 0 0 / 0.7);
--accent: oklch(60% 0.2 255);
--accent-fg: oklch(99% 0 0);
--focus: oklch(60% 0.2 255);
--font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
--font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
--radius: 28px;
--radius-sm: 999px;
--shadow: inset 0 1px 1px oklch(100% 0 0 / 0.95), inset 0 -1px 1px oklch(100% 0 0 / 0.35), inset 1px 0 1px oklch(100% 0 0 / 0.5), inset -1px 0 1px oklch(100% 0 0 / 0.5), inset 0 0 18px oklch(100% 0 0 / 0.35), 0 10px 30px oklch(25% 0.05 260 / 0.16), 0 2px 6px oklch(25% 0.05 260 / 0.1);
--shadow-lg: inset 0 1px 1px oklch(100% 0 0 / 0.95), inset 0 -1px 1px oklch(100% 0 0 / 0.35), inset 1px 0 1px oklch(100% 0 0 / 0.5), inset -1px 0 1px oklch(100% 0 0 / 0.5), inset 0 0 18px oklch(100% 0 0 / 0.35), 0 30px 70px oklch(20% 0.05 260 / 0.3);
}Where it came from
Origin: Apple WWDC 2025 — iOS 26, iPadOS 26, macOS Tahoe, watchOS 26, tvOS 26, visionOS 26
Introduced at WWDC 2025 as Apple’s biggest redesign since iOS 7, inspired by visionOS. Unlike flat glassmorphism, it simulates lensing — edges bend what is behind them — and controls float above content instead of sitting in bars. Early betas were criticised for legibility; Apple made bars more opaque during the beta cycle and added a more tinted option in iOS 26.1.
How to spot it
- Refraction and lensing at the edges, not just blur
- Specular highlights that move with the device
- Floating, capsule-shaped controls
- Tinted by the content underneath
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Content stays the hero | Legibility suffers over busy content |
| Feels physical and alive | Hard to reproduce faithfully on the web |
| Consistent across Apple platforms | GPU-heavy |
In the wild
- iOS 26 tab bars and lock screen
- macOS Tahoe sidebar
- Apple Music floating player
Use it when
Native Apple apps, or media-first interfaces where chrome should get out of the way.