How to Build Frosted-Glass CSS (Glassmorphism)

Glassmorphism generator opens with a working glass panel already showing over a default backdrop and a live CSS block below it. Every slider or colour change re-renders both the preview and the copyable output at the same time.

1. Pick a demo backdrop

Four fixed, built-in CSS gradients - no photos, nothing uploaded - sit behind the preview panel so the blur effect has something visible to work on while adjusting the sliders. This choice only affects the on-page preview; it never appears in the copied CSS, which is written to blur whatever is genuinely behind the element wherever it actually gets used.

2. Set the blur and the tint

Blur (0-40px) is the core of the effect - higher values soften the backdrop more aggressively; 0 produces a flat tinted panel with no blur at all, a legitimate, reachable state rather than a broken one. Tint colour and Tint opacity (0-100%) set the translucent colour laid over the blurred backdrop - white is the common choice for a light glass look, but any colour works, and pushing opacity toward 100% gradually turns the panel opaque, which defeats the visual point of "glass" while remaining entirely valid CSS to experiment with.

3. Boost saturation to counter the wash-out

Saturation (100-200%) compensates for the way blur tends to flatten colour intensity - the starting value (after Start fresh) sits at 180% specifically because 100% (no boost) often looks slightly duller behind the blur than the same backdrop does unblurred. Raising it further intensifies the blurred colours; dropping it toward 100% is worth trying deliberately for a calmer, more muted glass look rather than the vivid starting value.

The tint colour itself doesn't have to be white either. White over a colourful backdrop is the bright, airy look most people picture first, but a dark tint produces a "smoked glass" effect instead - the same recipe, a different starting colour. A near-black tint like #0a0a0a at 25% opacity produces rgba(10, 10, 10, 0.25), worth trying for a dark-themed card that still wants a hint of whatever's behind it rather than the fully solid panel a dark UI would otherwise default to.

4. Set the border and the corner radius

Border opacity (0-100%) controls a white-bordered edge around the panel, at the same kind of low, translucent opacity as the tint - a visible edge without a hard, opaque line that would break the glass illusion. Corner radius (0-40px) rounds the panel; sharp corners on a glass panel tend to read as "a filtered rectangle" rather than an actual pane, so most real uses keep at least a modest radius.

5. Copy the real, standards-compliant CSS

The output block always shows five real declarations - background, backdrop-filter, -webkit-backdrop-filter (the Safari-compatible duplicate, included automatically), border, and border-radius - live, inside an aria-live="polite" region. It never includes the demo backdrop gradient; what's copied is the self-contained glass effect, ready to apply to a real element with real content genuinely behind it. In a browser without backdrop-filter support, a note explains that the preview may not show the blur - the copied CSS is unaffected and still correct.

Two settings that quietly work against the effect

Tint opacity pushed high enough starts reading as a plain semi-transparent box rather than glass, because the tint itself is doing more visual work than the blurred backdrop showing through it - the whole effect depends on that backdrop staying visible, not just tinted over. The opposite mistake is a very low blur value paired with a light tint: not enough softening for the backdrop to genuinely read as blurred, closer to a hazy window than frosted glass. The tool's own starting point (what Start fresh restores) - 10px blur, 20% tint opacity - sits well inside the range where both the tint and the blurred backdrop are doing visible work at once, which is why it's worth starting from rather than an extreme in either direction, then adjusting by eye against whichever demo backdrop looks closest to the real page.

Everything above is plain CSS-string generation running in your browser - the demo backdrop is generated CSS, never a photo, and nothing is ever uploaded.