Glassmorphism
A frosted glass effect for modern, elegant UI design.
Get Started
Glassmorphism Preview
Generated CSS
A frosted glass effect for modern, elegant UI design.
Glassmorphism is a UI design trend that simulates frosted glass — a semi-transparent surface with a blurred view of whatever is behind it. Popularised by Apple's macOS Big Sur in 2020, it's now one of the most widely used styles in modern web interfaces, dashboards and app designs.
Use the generator above to tune blur, opacity, border and radius visually, then copy the complete CSS for your glassmorphism component.
backdrop-filter and -webkit-backdrop-filter for Safari support automatically.Glassmorphism requires just four CSS properties working together:
.glass {
/* 1. Semi-transparent background */
background: rgba(255, 255, 255, 0.12);
/* 2. Blur what's behind the element */
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px); /* Safari */
/* 3. Subtle light border */
border: 1px solid rgba(255, 255, 255, 0.2);
/* 4. Rounded corners */
border-radius: 16px;
}
backdrop-filter applies graphical effects (blur, brightness, saturation, etc.) to the area rendered behind the element. For the blur to be visible, the element itself must be at least partially transparent — that's why the semi-transparent background: rgba() is essential. Without it, you'd just see a solid colour.
This is different from filter: blur() which blurs the element itself and its contents. backdrop-filter only affects what's behind.
On dark backgrounds, flip the background and border colors from white-based to white-with-lower-opacity or even a dark tone:
/* Dark glassmorphism */
.glass-dark {
background: rgba(10, 10, 20, 0.4);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
}
/* Coloured glass tint */
.glass-purple {
background: rgba(124, 111, 255, 0.15);
backdrop-filter: blur(14px);
border: 1px solid rgba(124, 111, 255, 0.25);
border-radius: 16px;
}
A complete card example with padding, text and shadow:
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 20px;
padding: 32px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
color: #fff;
}
Always use a rich background — glassmorphism only looks good when there is something to blur behind the element. Place it over a gradient, image, or colourful background. It does nothing over a plain white canvas.
Keep background opacity low — 8–20% is the sweet spot for most use cases. Higher values make it look like a solid card rather than glass.
Add saturate() to the backdrop-filter — backdrop-filter: blur(14px) saturate(180%) boosts the colors behind the glass, enhancing the frosted effect considerably.
Use box-shadow for depth — A subtle box-shadow alongside the glass effect adds the illusion of the card floating above the background.
Glassmorphism can reduce text readability when the blurred background is busy. Always ensure sufficient contrast between your text and the glass surface. If your glass card sits over a light and a dark area simultaneously, test both extremes. The WCAG 2.1 minimum contrast ratio is 4.5:1 for normal text. When in doubt, increase the background opacity slightly or add a subtle text-shadow to improve legibility.
| Chrome | Firefox | Safari | Edge |
|---|---|---|---|
| 76+ | 103+ | 9+ (prefixed) | 79+ |
Always include -webkit-backdrop-filter alongside backdrop-filter for Safari support. Without it, Safari users will see a solid background instead of the frosted glass effect.
Three common causes: (1) the background of the glass element is too opaque — keep the alpha below 0.3 so the blur shows through; (2) -webkit-backdrop-filter is missing for Safari; (3) the parent has overflow: hidden with no actual content behind it. Glassmorphism needs visible content rendered behind the element to blur.
12–20px for most UI work. Below 8px the effect looks like a tinted overlay rather than frosted glass; above 30px the background becomes unrecognizable. Pair the blur with saturate(180%) to keep the colors vivid behind the glass — flat blur can wash out the underlying content.
Yes, but only if you include both backdrop-filter and -webkit-backdrop-filter in your CSS. Safari supported backdrop-filter behind a webkit prefix from version 9; the unprefixed version is fully supported in modern Safari. The generator above outputs both automatically.
Glassmorphism is transparent and blurred — light passes through, you see the background. Neumorphism is opaque and embossed — soft inner and outer shadows make the element appear molded from the same material as the parent. Glass needs colorful backgrounds to shine; neumorphism needs flat monochrome ones.
Two fixes: (1) add backdrop-filter: blur(16px) saturate(180%) — saturation boost keeps colors lively through the blur; (2) make sure the background behind the glass actually has color. A glass card on a flat #fff or #000 background will always look gray. Use a gradient, photo, or colorful pattern as the backdrop.
It can be — but takes care. Always meet WCAG 4.5:1 contrast for body text, even when the glass sits over a busy or variable background. Test the worst case (lightest and darkest spots in the backdrop). For users with prefers-reduced-transparency set, fall back to a solid surface using a media query.
Need to understand the difference between filter and backdrop-filter in depth? See our CSS Filter Generator and the complete glassmorphism guide →