A new visual language that responds to the content behind it, ambient light, and user context — making interfaces feel physical without sacrificing clarity.
What is Liquid Glass?
Apple's defining visual material for the next era of software design — a physics-inspired surface treatment that bridges the digital and physical worlds.
Liquid Glass is a translucent material system where surfaces dynamically adapt their appearance based on what lies beneath them, the ambient environment, and real-time interaction state. It is not a static visual effect — it is a responsive material with behaviour rules.
Unlike generic glassmorphism (which is simply backdrop-filter: blur with a semi-transparent background), Liquid Glass incorporates specular highlights, refraction simulation, semantic depth, and system-level adaptivity that responds to wallpaper, accessibility settings, and Dark Mode.
6 Visual Properties
Liquid Glass is defined by six distinct visual behaviours that, together, create the sensation of a real physical material rendered in software.
The 3-Layer System
Liquid Glass is always positioned at the boundary between two logical layers. Understanding the layer model is essential to applying it correctly.
Liquid Glass in Action
Four live demonstrations of how the material is applied in real interface contexts — each rendered entirely in CSS.
Web Translation Rules
Six CSS patterns that faithfully translate each Liquid Glass property for use on the web. Copy these as your starting point.
When to Use / When to Avoid
Liquid Glass is a purposeful material, not a universal coat of paint. Understanding when to apply it — and when not to — is as important as knowing how to implement it.
- Navigation bars, tab bars, and toolbars that float above scrolling content
- Temporary surfaces: modals, alerts, popovers, tooltips, and bottom sheets
- Floating action controls positioned over dynamic, image-rich backgrounds
- Sidebar panels and detail views in split-pane layouts
- System-level chrome elements that must appear consistent across diverse content
- Overlays that need to preserve spatial context while drawing attention
- Primary content cards or list rows — glass competes with the content itself
- Large sections with solid colour backgrounds where blur has nothing to act on
- Text-heavy reading surfaces — the visual noise reduces legibility
- Decorative use with no functional purpose or depth relationship
- Stacking multiple glass layers directly on top of each other without separation
- Form fields, inputs, or editable areas where contrast is critical for accessibility
Liquid Glass vs. Generic Glassmorphism
Not all blur effects are equal. Here's how Apple's Liquid Glass material differs from the trend-driven "glassmorphism" commonly found across the web.
| Property | Liquid Glass (Apple HIG) | Generic Glassmorphism |
|---|---|---|
| Specular highlights | Mandatory — inset box-shadow simulates edge lighting from an ambient source | Rarely implemented; surfaces appear flat and unconvincing |
| Blur quality | 20–80px Gaussian + saturation + brightness adjustment for refraction | Simple blur only; no colour amplification or brightness correction |
| Dark mode behaviour | Different fill, border opacity, and blur intensity per colour scheme | Often not adapted — same white fill in both modes |
| Semantic depth | Always implies a specific z-position in the layer model; carries meaning | Applied decoratively without layer logic or hierarchy purpose |
| Accessibility | Fallbacks for Increase Contrast, Reduce Transparency, and older browsers | No fallback strategy; often fails WCAG contrast requirements |
| Colour sampling | Adapts tint from underlying content colour automatically | Fixed white fill regardless of what lies beneath |
| Motion integration | Blur radius and opacity transition with spring physics during interactions | Static; no transition on appearance or dismissal |
| Platform parity | Consistent across iOS, macOS, visionOS, and watchOS via system APIs | Web-only workaround; no native system equivalent |