CSS Glassmorphism Generator

Glass is invisible without something colorful behind it to blur. That's the whole catch of glassmorphism, and it's the thing most generators quietly get wrong. They float your frosted card over a gray checkerboard, so you tune the blur and the transparency against nothing, then paste the result onto your real page and it reads like a completely different effect. This one previews over a real gradient, and you flip between a dark one and a light one, because a white tint only shows up as glass when something dark sits behind it. That choice is half the effect, so you get to make it here instead of finding out later.

It also always prints the -webkit-backdrop-filter line. That single line is the one copy-paste snippets around the web love to leave off, and dropping it is the number one reason someone's glass looks perfect on their machine and shows up as a plain see-through box for every visitor on an iPhone. More on that below, because it catches almost everyone once.

And the preview is not a mockup. The card on screen is built from the exact values the tool writes out, so the CSS you copy is the CSS you're looking at, down to the last decimal. You drag the sliders, watch the card react over real color, and copy it when it looks right. Nothing uploads, there's no account, and it keeps working after the page has loaded even with the wifi off.

1. Pick your backdrop first. Use the Dark / Light toggle above the preview. It decides whether your tint should be white or dark, and getting it backwards is why glass sometimes looks like a smudge. White tint goes over the dark gradient. Flip to the light backdrop and the tint has to go dark, otherwise there's nothing to see.
2. Start from a preset. Frosted card, Subtle navbar, Heavy glass, and Dark on light give you four sane starting points. Load the closest one and adjust, rather than building from zero.
3. Set blur and transparency together. They fight each other. Blur around 8 to 16px suits most real designs. Keep the tint alpha low, roughly 0.05 to 0.15 on dark, a touch higher on light. Too transparent and the panel vanishes, too solid and it's just a colored card.
4. Push saturation past 100%. This is the knob that separates flat blur from glass that looks expensive, it deepens the colors bleeding through. Try 150 to 180%.
5. Nudge the border and radius, then copy the CSS and drop it on a card that sits over an image or a gradient. Over a flat color it won't have anything to blur.

Two lines decide whether your glass survives contact with real visitors, and quick snippets almost always ship without them.

The first is the -webkit- prefix. For years Safari on both Mac and iPhone understood only -webkit-backdrop-filter, not the plain backdrop-filter. That has improved, but the safe move is still to write both lines with identical values, and a huge slice of mobile traffic is iPhones. Skip the prefix and Safari renders your translucent tint with no blur behind it, so a chunk of your audience gets a flat washed-out box next to your careful design and you never notice, because it works fine on your desktop Chrome. This tool prints the -webkit- line every time. Don't delete it to tidy the CSS, it keeps Safari from dropping the blur.

The second is a fallback for browsers that can't blur at all. backdrop-filter works in every current major browser now, meaning Chrome, Edge, Firefox, and Safari with the prefix. For the live picture, caniuse tracks it. But an old device, a corporate build with the feature locked, or a browser with it switched off gets no blur, and then all that's left is your tint. If that tint is very low-opacity, and for dark glass it is, those users see faint text floating on a nearly invisible panel. The effect doesn't fade gracefully, it collapses into something unreadable. A feature query fixes it:

.glass {
 background: rgba(255, 255, 255, 0.12);
 backdrop-filter: blur(12px) saturate(160%);
 -webkit-backdrop-filter: blur(12px) saturate(160%);
}

@supports not (backdrop-filter: blur(1px)) {
 .glass {
 background: rgba(20, 24, 34, 0.85);
 }
}

Supporting browsers get the pretty version, the rest get a solid-enough panel they can still read. That block is the difference between an effect that breaks for some users and one that works for everyone, and it's the piece a copy-paste always leaves out.

The whole appeal is that the background bleeds through your panel, and that same bleed-through is what wrecks your text.

Picture a glass card with white text. Behind it the page scrolls, and eventually a pale patch of the background slides under the words. Now it's white on almost-white and the label is gone. It passed every check while you tested against the dark part of the gradient, then failed the instant a user scrolled somewhere lighter. Frosted glass has variable contrast built in, which makes it a real accessibility problem you have to design around.

What actually helps is testing against the worst case, not the average. Find the lightest region your background can ever be behind that text, and check the contrast there. The WCAG AA bar is 4.5:1 for normal text and 3:1 for large text, and if your worst-case pairing fails it, the panel fails.

That is the check the line under the preview is running, on the demo card itself, both ends of it. It walks the gradient behind the glass, composites your tint over every color it finds, and reports the worst ratio the label reaches and the best. Worth saying out loud: on the dark backdrop the frosted white presets do not clear 4.5:1, they sit somewhere between 2.4 and 4.9 depending on which one you load and where the words land. That is not a bug in the presets, it is what white text on a barely-there white pane over a bright gradient measures, and pretending otherwise would be the useless kind of tool. The dark-on-light preset is the one that clears it comfortably. Your own page is not this gradient, so treat the number as a demonstration of the method rather than a verdict on your design, and run the same check against your real background. More blur helps more than you'd expect, it mutes the background's sharp detail into a smoother wash and steadies the contrast under your text. A slightly stronger tint alpha does the same. And a faint text-shadow under white text buys a lot of readability for almost nothing. If you can't clear contrast against every background the panel might drift over, the glass is simply too transparent for that content.