Liquid Glass
リキッドガラス / 2025– / Style / Apple UI
Unifies the floating control and navigation layer as a fluid glass material that refracts and adapts to the content beneath.
At a glance
Visual cues
- Dynamic refraction
- Concentric corner radii
- Floating control layers
- Reflected background color
Best used for
- Apps that show content full bleed while floating only the controls above it.
- Screens where light, dark and wallpaper change but control positions must hold.
Use this style
Take the compact brief into a project or hand the structured version to an AI tool.
Detailed guidance and sourcesProduction rules, reference works, comparisons, research and citation formats
Dictionary entry
- Type
- Keep text off the material itself and set minimum sizes from measured contrast.
- Composition
- Hold controls to the edges and make inner and outer radii concentric.
- Material
- Use one refracting layer only, letting it pick up the color beneath.
- Caution
- Keep it to the control layer rather than decorating content with translucent cards. Each added layer lets more background through until text fails, so check legibility on devices and honor Reduce Transparency.
- Further study
- Apple Human Interface Guidelines / regular and clear variants / content and functional layers
Related entries
- Glassmorphism (グラスモーフィズム)Shared effects: Futurity / Luxury.Compare Liquid Glass and Glassmorphism
- Skeuomorphism (スキューモーフィズム)Editorially linked for a useful contrast.Compare Liquid Glass and Skeuomorphism
Often confused with
More from Apple UI
Continue through styles in the same Apple UI family, prioritised by shared effects.
- Brushed Metal (ブラシドメタル)Shared effects: Technique / Luxury.
- visionOS Spatial Design (visionOS 空間デザイン)Shared effects: Futurity / Technique.
- Aqua (アクア)Shared effects: Futurity.
Cite this entry
The dictionary is meant to be linked to. Take whichever form fits where you are writing.
- Link
- https://indexstyle.org/styles/liquid-glass
- Markdown
- [Liquid Glass — IndexStyle](https://indexstyle.org/styles/liquid-glass)
- HTML
- <a href="https://indexstyle.org/styles/liquid-glass">Liquid Glass — IndexStyle</a>