What Is Glassmorphism?
Glassmorphism is a UI design trend that creates a frosted glass effect — translucent panels that blur the content behind them, giving a sense of layered depth. It became popular around 2020 with Apple's macOS Big Sur and has since appeared in web UIs, dashboards, and cards.
The effect combines three elements: background transparency, backdrop blur, and a subtle border on the translucent surface.
The CSS Properties
The core property is `backdrop-filter`:
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); /* Safari */
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
}`backdrop-filter: blur()` blurs everything behind the element. The blur radius (in px) controls how strong the frosted effect is — values between 8px and 20px are typical. Lower values look subtle; higher values look more dramatic.
`background: rgba(...)` makes the panel semi-transparent. The alpha channel (0.1–0.3) controls how much of the background shows through. Too opaque and you lose the glass effect; too transparent and the content on the card becomes hard to read.
`border` with a low-opacity white or light color adds the edge highlight that makes the panel look like it has a physical edge.
Saturation and Other Filters
backdrop-filter accepts multiple filter functions, not just blur:
backdrop-filter: blur(10px) saturate(180%) brightness(1.1);
saturate boosts color vibrancy of the background through the glass, enhancing the effect. brightness makes the panel feel lighter or heavier.
The Background Requirement
Glassmorphism only works when there is interesting content behind the element. A solid color background makes the blur invisible. The effect requires a colorful gradient, an image, or other UI elements behind the glass panel.
A common pattern is a gradient background with floating blurred shapes:
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}Box Shadow
A soft shadow grounds the panel in the composition:
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
Browser Support
backdrop-filter is supported in Chrome 76+, Edge 79+, Firefox 103+, and Safari 9+ (with -webkit- prefix). For browsers that don't support it (primarily older Firefox), the glass effect degrades gracefully to a semi-transparent panel without blur — still usable, just without the frosted effect. The -webkit-backdrop-filter prefix is still needed for Safari.
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.glass-card {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
}Accessibility and Contrast
Glassmorphism can create readability issues. Light text on a blurred light background may lack sufficient contrast. Always check WCAG contrast ratios for any text placed on a glass panel. In practice, darker backgrounds or slightly more opaque glass panels provide better contrast. The effect looks best as a decorative layer, with important textual content given enough contrast to remain readable regardless of what's behind the glass.
Performance
Like CSS animations, backdrop-filter triggers GPU compositing. Use it on a limited number of elements — a few cards or a navigation bar — rather than on hundreds of elements simultaneously, which can degrade performance on lower-end devices.