CSS Glassmorphism Generator
Build a frosted-glass card with backdrop-filter and copy the CSS.
Build a Frosted Glass Effect in CSS
Glassmorphism depends on one property doing the heavy lifting: backdrop-filter, which blurs whatever is behind an element rather than the element itself. The effect only works if several things are tuned together — blur radius, background transparency, a little extra saturation, and a light border to catch the edge. Get one wrong and it looks like a mistake rather than glass.
This generator gives you all of them with a live preview over a real backdrop, because the effect is invisible against a flat colour. You choose both the tint and the background behind it, and the output includes the -webkit- prefix Safari still requires.
Key features
- Live preview over a real backdrop — with the background colour under your control, since glass over flat white shows nothing at all.
- Blur from 0 to 40 px — alongside transparency from 2% to 80%, which are the two that decide whether it reads as glass.
- Saturation boost — up to 220%, the subtle touch that separates glass from fog.
- Border brightness and corner radius — a bright hairline edge is what makes the panel look like a pane rather than a smudge.
- Prefixed output — includes
-webkit-backdrop-filterfor Safari, ready to copy.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: CSS Glassmorphism Generator
- Set the blur
Between 8 and 20 pixels suits most cards. Higher and you lose any sense of what is behind. - Adjust transparency and saturation
Around 10–25% opacity, with saturation a little above 100%. Too opaque and the blur is wasted; too transparent and text becomes unreadable. - Tune the edge
Raise the border brightness until the panel has a visible hairline, and set the corner radius to match your design. - Copy the CSS
Complete with the Safari prefix, ready to drop into your stylesheet.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
Why does my glass effect show nothing?
Almost always because there is nothing behind it to blur. <code>backdrop-filter</code> blurs the backdrop — over a flat white parent it produces flat white. Put an image, gradient or content behind the element.
Is backdrop-filter widely supported?
Yes in all current browsers, with Safari needing the <code>-webkit-</code> prefix that this tool includes. Older browsers ignore it and show your background colour, so choose one that is acceptable on its own.
Does it hurt performance?
It can. Backdrop blur is GPU work recomputed when anything behind it moves, so a scrolling page with several glass panels can drop frames on low-end devices. Use it for a few elements, not everywhere.
How do I keep text readable on glass?
Raise the background opacity, add a subtle text shadow, and check the contrast ratio against the lightest area of your backdrop rather than the average. Glass is where accessibility failures hide.