Content stays opaque — only the control layer is glass
Liquid Glass
Vendor design language
Apple's own name for the adaptive material introduced across iOS 26 / macOS Tahoe (WWDC 2025). A vendor-defined design language, documented in Apple's Technology Overviews and HIG.
also called Apple Liquid Glass, the new Apple look, iOS 26 glass design
Liquid Glass is Apple's adaptive material for controls and navigation: toolbars, tab bars, buttons, and sliders render as lens-like glass that floats in its own layer above app content, refracting what scrolls beneath and re-tinting itself for legibility in light and dark contexts. It is functional, not decorative — Apple applies it to the control layer and keeps content itself opaque. Capsule shapes and concentric corner radii are part of the geometry.
Scope: 'SwiftUI style' is not a style — SwiftUI is Apple's UI framework. Apps built with it currently LOOK like Liquid Glass; before 2025 they had the flatter platform-native Apple look, and early Mac OS X's candy-and-pinstripes look was Aqua. If someone says 'make it look like SwiftUI', they usually mean this entry.
If you called it…
…you meant Liquid Glass.
What makes it this — the defining signals
- Glass = the control layerLayout & composition
Only controls and navigation are glass — bars, buttons, sliders float above the app; the content beneath stays opaque and full-contrast.
- Lensing, not just blurDepth & light
The material behaves like a real lens: it bends and concentrates light from what's beneath, with bright edge highlights — richer than a flat frosted blur.
- Adaptive self-tintingColor & contrast
The glass continuously re-tints from the content scrolling under it and flips between light and dark appearance on its own to stay legible.
- Capsule and concentric geometryGeometry & borders
Controls tend to capsules; nested corners share a common center (concentric radii), so the glass shapes sit optically flush inside their containers.
Style brief — paste into your agent
Create the surface in the spirit of Apple's Liquid Glass. Defining signals: glass is reserved for the floating control layer (toolbars, tab bars, buttons) above opaque content; the material lenses what's beneath it — blur plus refraction-like edge highlights, not flat frost; controls adapt their tint to stay legible over changing content; capsule shapes with concentric corner radii. Keep the underlying content unrestricted. On Apple platforms use the real APIs — SwiftUI .glassEffect(), glassEffect(.regular, in: .capsule), and standard bars get it automatically; on the web approximate with backdrop-filter: blur + saturate, layered inner highlights, and capsule radii. Do not drift into generic glassmorphism; the decisive difference is that content never becomes glass — only controls float as glass above it. Preserve legibility over every content region (the real material self-adapts — your approximation must too), visible focus states, and honor Reduce Transparency / Reduce Motion.
Often confused with Glassmorphism
The same little app, rendered in both styles — only the style changes, so the difference you see IS the difference.
Welcome back
Pick up where you left off.
Liquid Glass
Welcome back
Pick up where you left off.
Liquid Glass
This is Liquid Glass because the glass is a functional system material reserved for controls and navigation floating above opaque content, adapting its own tint for legibility.
It would become glassmorphism if the frosted treatment spread to the content itself — translucent cards over a decorative wallpaper, blur as a skin rather than a control layer.
Full style DNA
Layout & composition
Only controls and navigation are glass — bars, buttons, sliders float above the app; the content beneath stays opaque and full-contrast.
Depth & light
The material behaves like a real lens: it bends and concentrates light from what's beneath, with bright edge highlights — richer than a flat frosted blur.
Color & contrast
The glass continuously re-tints from the content scrolling under it and flips between light and dark appearance on its own to stay legible.
Geometry & borders
Controls tend to capsules; nested corners share a common center (concentric radii), so the glass shapes sit optically flush inside their containers.
Motion
Glass elements merge, split, and reshape as context changes — a tab bar shrinking on scroll, a button expanding into a menu.
Imagery & ornament
Anything can sit beneath the glass — photos, maps, lists; the material adapts to it rather than requiring a curated backdrop.
Surface & material
Making content itself translucent — glass cards on glass backgrounds — is exactly what Apple's guidance avoids; that's generic glassmorphism, and it costs legibility.
In code — optional starting points
The brief above is framework-neutral; these are concrete handles if your stack matches.
| SwiftUI | .glassEffect(.regular, in: .capsule) | The real material — standard toolbars/tab bars adopt it automatically |
| SwiftUI | GlassEffectContainer { … } | Lets neighboring glass controls merge and morph together |
| CSS | backdrop-filter: blur(14px) saturate(1.6); background: rgba(255,255,255,.08); box-shadow: inset 0 1px 1px rgba(255,255,255,.35), inset 0 -1px 1px rgba(255,255,255,.12); border-radius: 999px; | Web approximation: lens-ish capsule (no true refraction) |
Accessibility & misuse
- Apple's material self-adjusts for legibility — a hand-rolled web imitation does not; test text over the worst content that can scroll beneath and add contrast treatment.
- Honor Reduce Transparency (near-opaque fallback) and Reduce Motion (disable morphing).
- Never place critical text directly on imitation glass without a measured 4.5:1 against live worst-case backgrounds.
Origin
Introduced by Apple at WWDC 2025 as the first unified design language across iPhone, iPad, Mac, Watch, and TV — Apple credits visionOS's glass optics as the inspiration, and ships it as a system material with SwiftUI/UIKit/AppKit APIs rather than a mere visual theme.