Overview
Introduced at WWDC 2025 and debuting in iOS 26 and the rest of Apple’s 26-series operating systems, Liquid Glass is a new design material inspired by visionOS. It uses translucency, blur, and dynamic light effects to let background content subtly show through, creating depth and motion across the interface.
Liquid Glass is designed to adapt to its size and environment. Unlike previous materials with fixed light or dark appearances, each layer dynamically adjusts based on the content behind it.
Basics
Controls vs Standard glass
‘Controls’ is used for compact UI elements. Shadows and tints shift as underlying content changes, and the material can transition between light and dark.
‘Standard’ glass is used for larger elements and appears thicker and more substantial. It features deeper shadows, stronger lensing and refraction, and softer light scattering.
Apple documentation refers to this as Small and Medium glass.
Left: Controls, Right: Standard glass
Standard materials
Prioritizes clarity and contrast with opaque or lightly blurred surfaces, keeping content readable in dense or complex layouts. These materials existed before liquid glass and are used in both iOS 18 and iOS 26.
Utility glass
Minimizes diffusion to increase transparency, letting background content show through more directly. Best suited for components layered over photos or video.
Apple documentation refers to this as clear glass.
Scroll edge effects
Background content gently fades at scroll edges, visually lifting the glass above moving content and improving text and action legibility.
Tinting
Adds subtle color while maintaining translucency and depth. Tints adapt to underlying content and light or dark contexts.
Accessibility
- Liquid glass responds to ‘Show Borders,’ ‘Reduce Transparency,’ and ‘Increase Contrast' accessibility settings.
From left to right: Default, Show Borders: On, Reduce Transparency: On, Increase Contrast: On, All on
- The reduce motion setting affects liquid glass motion
- iOS system components automatically adapt; custom elements must provide fallbacks.
- Test with accessibility settings enabled; if it’s a custom component, we need to make sure the settings are respected
Best practices
Reserve for navigation and controls, not content
Use glass sparingly to avoid distraction
Avoid glass-on-glass. Stacking glass surfaces adds noise and confusion.
Use tinting and color with restraint within glass
Choose Default vs. Utility glass intentionally
Prioritize legibility and contrast. If glass makes text harder to read, remove the glass.
Liquid glass is a functional cue, not a decoration. We use it to communicate temporary focus and context, not for stylistic purposes.