What Is Glassmorphism?
Glassmorphism is a design trend characterized by frosted-glass surfaces that create a sense of depth and layering in user interfaces. Elements appear semi-transparent with a blur effect applied to whatever sits behind them, creating a sophisticated, dimensional look that suggests physical glass panels floating in space.
The trend exploded in 2020-2021, heavily influenced by Apple's macOS Big Sur and iOS design language, though the concept of translucent interfaces dates back to Windows Vista's Aero Glass and earlier experiments.
Key Principles
1. Background Blur (Frosted Effect)
The defining characteristic: a blur filter applied to the background behind a semi-transparent element. This creates the 'frosted glass' look that gives the style its name.
2. Translucency
Elements are semi-transparent (typically 10-40% opacity on white or colored backgrounds), allowing the content beneath to show through softly.
3. Subtle Borders
Thin, semi-transparent borders (often 1px white at 20-30% opacity) define the edges of glass elements and catch light, reinforcing the material metaphor.
4. Layered Depth
Multiple glass panels at different z-levels create a sense of spatial hierarchy. Foreground elements blur the background more, mid-level elements less.
5. Vivid Backgrounds
Glassmorphism needs colorful or complex backgrounds to work. The blur effect is pointless against a solid white wall — the magic happens when rich gradients or imagery sit behind the glass.
History & Origins
The concept of translucent UI goes back to Windows Vista's Aero Glass (2006) and was explored by iOS 7 (2013). The modern glassmorphism trend was codified and named around 2020 when designer Michał Malewicz published influential articles defining the style. Apple's macOS Big Sur (2020) brought glassmorphism to mainstream OS design, and the trend quickly spread across web and app design.
Modern UI Applications & Examples
- Apple (macOS/iOS) — The notification center, Control Center, and many system panels use frosted glass extensively. It's become core to Apple's design language.
- Windows 11 — Microsoft's Mica and Acrylic materials are glassmorphism implemented as system-level design components.
- Linear — Uses subtle glass effects in modals and overlays that add depth without overwhelming the interface.
- Vercel Dashboard — Employs glassmorphic elements in its navigation and modal overlays.
When to Use It
Glassmorphism excels in hero sections, modals, navigation overlays, card interfaces, and any scenario where you want to create depth and sophistication. It works particularly well for premium or creative products.
When Not To
Glassmorphism has significant accessibility concerns. Low contrast text on translucent backgrounds can be hard to read, especially for users with visual impairments. It also performs poorly on older devices (backdrop-filter is GPU-intensive) and looks flat and lifeless against solid backgrounds. Avoid it for text-heavy interfaces or data-dense dashboards.
How to Apply It
- Always ensure sufficient text contrast (test with WCAG tools)
- Use backdrop-filter: blur() with semi-transparent backgrounds
- Add subtle borders to define element edges
- Place glass elements over colorful or complex backgrounds
- Provide fallbacks for browsers/devices that don't support backdrop-filter
/* Glassmorphism card */
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
padding: 2rem;
}
/* Dark glass variant */
.glass-card-dark {
background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Fallback for unsupported browsers */
@supports not (backdrop-filter: blur()) {
.glass-card {
background: rgba(255, 255, 255, 0.85);
}
}
Related Styles
See also: Neumorphism, Material Design, Flat Design, Skeuomorphism