Generate frosted-glass CSS in seconds — blur, opacity, border, done.
CSS Glassmorphism Generator
.glass {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}The Glassmorphism Generator creates frosted-glass CSS effects instantly — no design tools needed. Dial in backdrop blur, background transparency, border opacity, border radius, and drop shadow, then watch the live preview update in real time. Copy the finished CSS, React inline style, or Tailwind snippet and paste it straight into your project. Perfect for cards, modals, navbars, and any UI element that needs that modern glass look.
The backdrop-filter: blur() property blurs everything behind the element. Pair it with a semi-transparent background (rgba) and you get the classic glassmorphism look. Always include -webkit-backdrop-filter for Safari support.
Glassmorphism only works when there is colourful or complex content behind the element for the blur to act on. Place the glass card over a gradient, image, or vivid background — as shown in the live preview — to see the effect properly.
Yes, backdrop-filter has broad support in modern browsers (Chrome, Edge, Firefox 103+, Safari). Add the -webkit-backdrop-filter prefix for older Safari versions. The generated code includes both prefixes automatically.
Tailwind's built-in backdrop-blur-* and rounded-* classes cover the structural side. However, exact RGBA colours for background and border require inline styles (or CSS custom properties) since Tailwind cannot express arbitrary rgba() values in class names alone.