.glass { background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 12px; }

What is glassmorphism?

Glassmorphism is a UI design trend that simulates frosted glass: a semi-transparent element with a blurred background, subtle border, and soft shadow. It was popularized by Apple's macOS Big Sur (2020) and Microsoft's Fluent Design System.

The CSS recipe

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

Browser support note

backdrop-filter is supported in all modern browsers. The -webkit-backdrop-filter prefix is still needed for Safari on older iOS. The effect requires a non-opaque background; it has no visual effect on fully opaque elements.

Browser support detail

backdrop-filter requires the -webkit- prefix for Safari on iOS and macOS prior to Safari 15.4 (2022). Firefox required a flag until version 103 (2022); all major browsers now support it without flags. For broad compatibility, always include both backdrop-filter and -webkit-backdrop-filter.

Performance considerations

backdrop-filter is GPU-composited, which provides good performance on desktop. On mobile devices, blurring large areas is expensive - use sparingly on low-end devices. Avoid animating blur radius (e.g., transitioning from 0 to 10px) as this forces continuous compositing. Instead, animate opacity or transform, which are GPU-accelerated without triggering re-blurs.

Design guidelines

Glassmorphism works best over colorful, blurred backgrounds (gradient or photography). Against a white or flat background, the effect is invisible.
Use low background opacity (10–25%) to let the blurred color show through. Higher opacity reduces the frosted-glass effect.
Add a subtle white border (1px, rgba 25–40% opacity) to define the card edge against the background.
Limit glass elements to key UI components - excessive use creates visual noise and fatigue.