Glassmorphism
グラスモーフィズム / 2020s / Style / UI Expression
Shows depth and hierarchy through translucent layers, floating information lightly.
At a glance
Visual cues
- Background blur
- Translucency
- Thin white borders
- Color bleed
Best used for
- Making layered information feel light
- OS-grade refinement and depth
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
- A neutral sans-serif
- Composition
- Stack cards with clear front-to-back order
- Material
- Colored ground, translucent panes, fine edges
- Caution
- Legibility breaks with the wrong background. Give text surfaces real opacity.
- Further study
- macOS Big Sur / Windows 11
Related entries
- Deconstructivism (脱構築主義)Shared effects: Futurity.Compare Glassmorphism and Deconstructivism
- Minimalism (ミニマリズム)Shared effects: Calm.Compare Glassmorphism and Minimalism
Often confused with
More from UI Expression
Continue through styles in the same UI Expression family, prioritised by shared effects.
- Dark Mode (ダークモード)Shared effects: Calm / Luxury.
- Glitch (グリッチ)Shared effects: Futurity.
- Claymorphism (クレイモーフィズム)Shared effects: Futurity.
Browse all UI Expression entries
Cite this entry
The dictionary is meant to be linked to. Take whichever form fits where you are writing.
- Link
- https://indexstyle.org/styles/glassmorphism
- Markdown
- [Glassmorphism — IndexStyle](https://indexstyle.org/styles/glassmorphism)
- HTML
- <a href="https://indexstyle.org/styles/glassmorphism">Glassmorphism — IndexStyle</a>