Glassmorphism CSS Generator

How to use this tool

1. Adjust blur, opacity, saturation, and border settings.
2. Preview the glass card on the gradient background.
3. Copy the generated CSS.

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.

CSS recipe (matches the default generator settings)

.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;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
}

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.