Glassmorphism Generator

What glassmorphism actually is

"Glassmorphism" is the frosted-glass panel look — a translucent card that blurs and re-tints whatever sits behind it, popularised by Apple's control-centre surfaces and Windows' Acrylic material. It is not a single CSS property; it is a recipe of a few working together, and getting any one wrong is why so many attempts look like plain transparency instead of glass. This tool composites all the pieces at once and hands you the exact block.

The four ingredients

Move any slider and all four update live; the copied block lists them in a canonical order — background, corner radius, the two backdrop-filter lines, border, then shadow — so pastes are stable.

Worked example: a frosted card

The default settings — 12px blur, 25% white fill, 120% saturation, 16px radius, a 30% white border — produce this, which is a solid starting point for a card or modal over a colourful hero:

.glass-card {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

On a dark background, drop the fill to about 15% and try a light tint; on a light background, a slightly higher fill and a subtle coloured tint reads better. The blur wants to stay modest — 10 to 16px covers almost every design, and anything larger mostly costs performance rather than looks.

Why saturate() rides along with the blur

Blurring is an average of neighbouring pixels, and averaging colours pulls them toward grey — so a pure blur() frost looks slightly foggy and desaturated. A small saturate(120%–180%) in the same backdrop-filter value puts the vibrancy back, which is why real frosted-glass UIs use it. The function order matters for readability, not result here: this tool always writes blur() before saturate(), the canonical order.

Need raw control instead?

This generator is opinionated toward the glass recipe. If you want to build an arbitrary backdrop-filter or plain filter value — brightness, contrast, hue-rotate, drop-shadow and the rest — the CSS Filter & Backdrop-Filter Generator exposes every function with its own slider. Use that when you need something beyond frosted glass.

Honest limits

backdrop-filter is broadly supported today — Chrome, Edge, Safari (with the -webkit- prefix) and Firefox 103+ — but there are real caveats. Safari still needs the prefix, so ship both lines. Very old browsers ignore it and fall back to your plain translucent fill, which looks acceptable but not frosted. Certain stacking, overflow, transform or ancestor-filter contexts can make a browser silently drop the effect, so always test the real page, not just this preview. And a large blur on a big scrolling surface is genuinely expensive on low-end devices — keep the radius small and don't animate it. Finally, the preview backgrounds here are stand-ins; your real content and its transparency will change how the same values read, so confirm on the true component.