Create the frosted-glass effect — backdrop-filter blur and saturation, translucent tint, glowing border — tuned over a colorful demo scene so you see the real result.
Generated locally in your browser — your colors, settings and code never leave this page.
The four ingredients of glass
Glassmorphism is a recipe: backdrop blur (the frost), a translucent surface tint, a saturation boost so colors behind pop through the frost, and a semi-white border reading as caught edge light. Each has a slider here, and — crucially — the preview places your glass over a colorful scene, because backdrop-filter over a flat background is invisible, the number-one reason the effect “does not work”.
Worked example
.glass {
background: rgb(255 255 255 / 0.25);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgb(255 255 255 / 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
}Where glass belongs
- Navigation bars over scrolling content — the canonical use.
- Cards over hero imagery; modals over busy pages; music-player-style widgets.
Accessibility — the serious caveat
- Text on glass sits over UNPREDICTABLE content, so contrast varies with whatever scrolls behind. Keep surface opacity generous, test against your darkest and lightest backdrops in the contrast checker, and never put dense reading text on glass.
Support
- All modern browsers; the emitted -webkit- prefix covers older Safari. Firefox support arrived in 2022 — genuinely old versions simply show the tint, a graceful fallback.
How to use the CSS Glassmorphism Generator
- Tune backdrop blur, surface opacity, saturation boost, tint and border glow.
- Judge the effect over the built-in colorful scene — glass needs something behind it.
- Copy the CSS, -webkit- prefix included.
Frequently asked questions
Why does my glass effect look like nothing on my site?
Because backdrop-filter needs visible content BEHIND the element — over a flat white background there is nothing to blur. Put imagery, gradients or content behind it, as the preview scene demonstrates.
What creates the "glass" look, technically?
Four ingredients: backdrop blur (the frost), a translucent tint (the surface), a saturation boost (colors behind pop through), and a semi-white border (the caught edge light). Each has its own slider.
Is glassmorphism accessible?
Only with discipline: text sits on a semi-transparent surface over unpredictable content, so contrast varies. Keep surface opacity generous, test with the WCAG checker against the darkest and lightest backdrop, and avoid glass for dense text.
