2020s · Global
Glassmorphism
Also known as Frosted Glass UI, Glass Morphism
Frosted, translucent panels that blur whatever sits behind them, floating over vivid backdrops with thin light borders to suggest layered sheets of glass.
Original specimen, not a historical artifactOriginal specimen in the Glassmorphism style. Owned; source: Design Style Book (original).
About the style
Glassmorphism is a UI aesthetic that gained prominence around 2020, propelled by Apple's macOS Big Sur and the broader 'frosted glass' treatment in iOS and Windows. Its core device is a semi-transparent panel with a background blur (the 'backdrop-filter' in CSS) so underlying content shows through as a soft, diffused wash, edged with a thin, light, often gradient border and a subtle shadow to imply a floating sheet of glass. Vivid, colorful backgrounds are essential, since the blur and translucency need rich content behind them to read. The style conveys depth and hierarchy through stacked translucent layers rather than skeuomorphic texture, feeling modern, airy, and premium. Widely adopted in dashboards, cards, and onboarding screens, it balances visual richness with restraint, though it demands care to maintain text contrast over busy backdrops.
Notable examples
- ▸Apple — macOS Big Sur translucent UI (2020)
- ▸Microsoft — Fluent Design 'Acrylic' material (2017)
- ▸Apple — iOS Control Center frosted panels (2020s)
Anatomy of Glassmorphism
The numbered markers call out the design elements that define this style. Hover or tap a marker to see its breakdown.
Original specimen, not a historical artifactOriginal specimen in the Glassmorphism style. Owned; source: Design Style Book (original).
Semi-transparent cards let background color and shapes show through as a soft, diffused wash.
A backdrop blur frosts whatever sits behind the panel, the defining optical trick of the style.
A hairline, often gradient, border catches an imagined light and defines the glass sheet's edge.
Bright, colorful backgrounds are required so the translucency and blur have something rich to reveal.
How Glassmorphism connects
Styles form a network, not a tree. Explore the direct neighbours below — click any to travel the map one hop at a time.
- Evolved from
- Influenced by
Describe it like this
Prompt-ready vocabulary for describing or re-creating the Glassmorphism look.