Glassmorphism
A design style using backdrop blur, transparency, and subtle borders to create frosted glass panels layered over colorful backgrounds.
Plain English
Glassmorphism works because it borrows from physical glass — light passes through and bends, revealing what lies behind while clearly separating the panel from its background. In UI, this means cards that blur their backdrop rather than fully obscuring it, using just enough transparency to communicate layering without losing legibility. The effect requires two ingredients: a colorful or gradient background (glass on white just looks grey) and a backdrop-filter blur (without it, transparency alone looks cheap). It is widely used in macOS, Windows 11, and fintech dashboards. The critical failure mode is forgetting contrast — white text on a blurred colorful background can easily fail WCAG.
Technical
background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px. Always check text contrast over the blurred background — test at multiple scroll positions since the background content changes. Blur value: 8–16px. Note: backdrop-filter does not work if a parent has overflow: hidden. Safari requires the -webkit- prefix.
Live Demo
Glassmorphism
✓ With blur
Glass Card
backdrop-filter: blur(12px)
✗ No blur
Plain Card
No backdrop-filter
Glassmorphism needs both a colorful background and backdrop-filter: blur() — either alone is not enough.
Usage
✓ Good usage
A dashboard card floating over a purple-to-blue gradient, with blurred background shining through and white text checked for 4.5:1 contrast.
✗ Bad usage
Glass cards over a white background — without color behind them, the blur has nothing to work with and the cards just look grey.
Recommended values
- background: rgba(255,255,255,0.10–0.20)
- backdrop-filter: blur(8–16px)
- border: 1px solid rgba(255,255,255,0.2)
- border-radius: 12–24px
- Text contrast: verify 4.5:1 minimum over all background states
- Background saturation: needs vivid colors to look its best
Common mistakes
- No colorful background — glassmorphism requires vivid background colors to look like glass.
- Missing -webkit-backdrop-filter — the effect completely vanishes in Safari without the vendor prefix.
- Failing contrast checks — translucent backgrounds shift depending on what scrolls behind the card.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Apply glassmorphism to the hero section cards. Set background: rgba(255,255,255,0.15), backdrop-filter: blur(12px), and a subtle white border. Place them over the existing gradient background. Check all text meets 4.5:1 contrast ratio. Add -webkit-backdrop-filter for Safari support.