Glassmorphism CSS Generator

Free glassmorphism CSS generator. Tune blur, border and shadow with live preview, then copy production-ready backdrop-filter code — runs entirely in your browser.

Glass Card
Live backdrop-filter preview
Sample Button
Tip: resize the preview smaller to see the blurred edges
Frosting Parameters
12px
25%
160%
Border & Shadow
1px
40%
20px
20%
Background Presets
40px
CSS
.glass-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20);
}

💡 Frosting is visible only with a translucent background and content behind the element

FAQ

What is glassmorphism?
A popular UI style: translucent surfaces with backdrop-filter blur, like frosted-glass cards floating over vivid backgrounds — seen in Windows 11 and macOS control center.
How do I use the CSS?
Copy the CSS onto your element. Content behind it (image or gradient) is required for the effect; Safari needs the -webkit- prefix, which is included.
Browser support?
All modern browsers support backdrop-filter; older ones gracefully degrade to a translucent block.