CSS Glassmorphism Generator

You want that macOS Big Sur look — a frosted glass card floating over a gradient background. The tutorials say backdrop-filter: blur() plus a semi-transparent background. What they don’t say: the blur radius, saturation boost, background alpha, border opacity, and border radius all interact — too much blur looks like a smudge, too little looks like a dirty window, and the wrong border alpha makes the glass edge disappear.

Why This Generator (Not the Backdrop Filter Generator)

PureDevTools has a CSS Backdrop Filter Generator that covers all 9 backdrop-filter functions. This tool is specifically optimized for glassmorphism — it exposes the 5 parameters that matter for frosted glass (blur, saturation, background transparency, border opacity, border radius) with a live preview over a gradient, so you can dial in the exact glass look. Everything runs in your browser; no data is sent anywhere.

What Is Glassmorphism?

Glassmorphism is a UI design style that simulates a frosted-glass surface. Elements appear to float above a blurred, translucent layer of whatever lies behind them — gradients, images, or other UI elements. The effect became widely recognisable through Apple’s macOS Big Sur, iOS, and the Windows 11 Fluent Design system.

The technique relies on three CSS properties working together:

.glass {
  /* Semi-transparent background */
  background: rgba(255, 255, 255, 0.2);

  /* The frosted blur */
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);

  /* Subtle edge highlight */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
}

CSS Properties Explained

backdrop-filter: blur()

blur() is the core of the glassmorphism effect. It applies a Gaussian blur to everything rendered behind the element — other DOM elements, gradients, and images — but not to the element itself.

backdrop-filter: blur(12px);

Typical blur values:

• 0–4px — subtle, barely noticeable
• 6–16px — standard glass feel
• 20–40px — heavy, opaque frost

backdrop-filter: saturate()

saturate() boosts or reduces the color intensity of the blurred content behind the glass. Values above 100% intensify colors (creating the vivid frosted-glass look seen on macOS), while values below 100% desaturate toward greyscale.

/* Vivid frost effect */
backdrop-filter: blur(12px) saturate(180%);

/* Both blur and saturation combined */
backdrop-filter: blur(20px) saturate(200%);

background: rgba()

A semi-transparent background is what gives the glass panel its “tint”. Using rgba() lets you control both the hue and the opacity independently:

/* Light glass — white tint, low opacity */
background: rgba(255, 255, 255, 0.2);

/* Dark glass */
background: rgba(0, 0, 0, 0.25);

/* Colored tint */
background: rgba(99, 102, 241, 0.15);

Keep the alpha (4th value) between 0.1 and 0.4 for a convincing glass look. Higher values make the element look painted rather than glassy.

Border: rgba() highlight

A thin, semi-transparent border mimics the light refraction on a glass edge. This is the detail that sells the effect:

border: 1px solid rgba(255, 255, 255, 0.3);

For dark glass panels, use a slightly brighter or lighter border than the background. For colored tints, use the tint color at higher opacity.

border-radius

Glassmorphism cards typically have rounded corners to soften the floating appearance:

border-radius: 16px;   /* soft card */
border-radius: 24px;   /* modern app panel */
border-radius: 50%;    /* glass badge / avatar */

Complete Example

.glass-card {
  background: rgba(255, 255, 255, 0.2);
  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);
}

<!-- Requires a colorful background behind the element -->
<div class="hero-bg">
  <div class="glass-card">
    <h2>Glass Card</h2>
    <p>Content here...</p>
  </div>
</div>

Glassmorphism Variants

Light Glass

Best against bright, colorful backgrounds. White tint with low opacity:

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);

Dark Glass

Useful for modals and overlays on dark or photographic backgrounds:

background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(16px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.15);

Colored Tint

Creates brand-specific glass panels:

background: rgba(59, 130, 246, 0.15);   /* blue tint */
backdrop-filter: blur(20px) saturate(200%);
border: 1px solid rgba(147, 197, 253, 0.4);

Frosted

Heavy blur for a thick frosted-glass appearance:

background: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(30px) saturate(150%);
border: 2px solid rgba(255, 255, 255, 0.5);

Browser Support and Compatibility

Always include both the unprefixed and -webkit- prefixed versions to cover Safari and iOS:

backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);

For environments where backdrop-filter is not supported, provide a fallback:

.glass {
  /* Fallback — opaque or semi-opaque card */
  background: rgba(255, 255, 255, 0.7);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

Performance Considerations

backdrop-filter is GPU-accelerated in most modern browsers but has a non-trivial rendering cost because it requires compositing the blurred backdrop as a separate layer:

• Avoid applying backdrop-filter to many elements simultaneously — each creates a separate compositing layer
• Avoid animating the blur value — changing it every frame forces re-compositing
• Prefer animating opacity or transform to fade/move glass elements — these are cheap GPU operations
• Test on mobile — older iOS and Android devices may struggle with heavy blurs on large elements

Using Glassmorphism in Tailwind CSS

Tailwind CSS v3+ provides direct utility classes:

<!-- Basic glass card -->
<div class="bg-white/20 backdrop-blur-md backdrop-saturate-[180%]
            rounded-2xl border border-white/30">

For Tailwind v4 or arbitrary values:

<div class="bg-white/20 backdrop-blur-[12px] rounded-[16px] border border-white/30">

Frequently Asked Questions

Why does the glass effect not show in my browser? Make sure there is visible, colorful content behind the glass element — glassmorphism needs a non-transparent background somewhere in the z-stack. Also verify that the parent container does not have overflow: hidden, which can clip the backdrop filter compositing layer on some browsers.

Can I apply glassmorphism to text? The backdrop-filter applies to the element’s entire box, including text. For text-only frosted effects, use a wrapping container. If you want the text itself to be semi-transparent over a blurred backdrop, wrap the text in a separate container with the glass styles.

How do I stack glassmorphism cards? Layering multiple glass elements is fine — each applies its blur independently to the content behind it. However, a glass element does not blur other glass elements — it blurs the non-glass content beneath them all.

Should I use backdrop-filter or filter? backdrop-filter blurs everything behind the element. filter blurs the element and its children. For glassmorphism (frosted glass), you always want backdrop-filter. Use filter: blur() only when you want to blur an element’s own content.

Does this tool send my data to a server? No. All CSS generation and preview rendering happens entirely in your browser. No data is transmitted to any server.