CSS Glassmorphism Generator

What is glassmorphism?

Glassmorphism is a UI style that imitates frosted glass: a translucent surface that blurs whatever sits behind it, finished with a thin light border and a soft shadow. It works best layered over colorful, high-contrast backgrounds such as gradients or photos, where the blur turns busy shapes into smooth color fields.

The effect relies on backdrop-filter, which applies filter functions to the area behind an element rather than to the element itself. blur() frosts the backdrop and saturate() above 100% keeps the blurred colors vivid instead of muddy. The element's own background must be partly transparent — an rgba() or hsl() color with alpha — otherwise there is nothing to see through.

The generator outputs both backdrop-filter and -webkit-backdrop-filter (still required by Safari before version 18) and wraps a more opaque background in @supports not (...), so browsers without support still render a readable card instead of a nearly invisible one.

How to use the CSS Glassmorphism Generator

1. Adjust blur and saturation to control how strongly the background is frosted.
2. Pick the glass color and its opacity. White at 10–25% suits dark or colorful backgrounds; dark glass suits light ones.
3. Set the border width, color and opacity, the corner radius, and toggle the drop shadow and top highlight.
4. Switch preview backgrounds and check the contrast estimate for your text color.
5. Copy the CSS, including the fallback block, and apply the .glass class to your card.

Example

A frosted card with prefix and fallback:

.glass {
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
}

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

Accessibility: keep text readable

Translucent surfaces make contrast unpredictable because the background behind the text changes as the page scrolls or the layout shifts. WCAG asks for at least 4.5:1 contrast for body text and 3:1 for large text, and that has to hold over the brightest and darkest parts of the backdrop — not just the average.

• Increase glass opacity or blur until the text passes contrast checks over every part of the background.
• Use glass for decorative containers, navigation bars and cards with short, bold text — not for long passages.
• Respect prefers-reduced-transparency where supported by raising the background opacity inside that media query.
• Add a visible focus style to interactive glass elements; a light border alone is often too subtle.

Performance

• Every frame, the browser must re-read and blur the pixels behind each glass element. Large blur radii on full-screen or many overlapping elements can cause jank on low-end phones.
• Avoid animating or scrolling large blurred areas over video; prefer small, fixed surfaces such as headers and cards.
• Nested backdrop filters multiply the cost. Apply the effect to one container instead of every child.
• If you only need a blurred image, blur the image itself with filter: blur() from the CSS Filter Generator — it is cheaper because it can be cached.

Browser support

backdrop-filter works in Chrome and Edge 76+, Safari 9+ (with the -webkit- prefix until Safari 18) and Firefox 103+. The generated @supports fallback covers anything older. Pair the card with a background from the CSS Gradient Generator and a softer shadow from the Box Shadow Generator.