toolready. Glassmorphism Generator

Glassmorphism Generator

Frosted-glass CSS cards with backdrop blur.

glass

What this does

Five sliders, a live card, and a six-line CSS block. The card sits on a deliberately busy stage — three radial colour blobs over an orange linear gradient — because frosted glass only shows its character over something with detail in it. A flat background makes any set of values look fine, which is how glass cards end up shipping too muddy or too faint.

The defaults produce this:

background: rgba(255, 255, 255, 0.20);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 14px;
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);

What does each slider control?

  • Blur, 0–40 px — the blur radius inside backdrop-filter. This is what frosts the background.
  • Saturation, 50–300% — a second backdrop-filter function. Blurring averages colours together and drains them; pushing saturation back up is what stops the glass looking grey.
  • Background opacity, 0–0.80 — the alpha on a white fill layered over the blur.
  • Border opacity, 0–0.80 — alpha on a 1 px white border.
  • Radius, 0–48 px — corner rounding on the card.

The box-shadow is fixed at 0 8px 32px rgba(31, 38, 135, 0.2), a cool blue-violet that reads as glass rather than ink. Swap it for your own in the box-shadow generator if you need it to match a wider elevation scale.

Why is there a -webkit-backdrop-filter line?

Safari has shipped this feature only under the -webkit- prefix for a long stretch of its history, and prefixed-only builds are still in the field on older iOS versions. Both lines carry the same value, and browsers ignore the property they do not recognise, so keeping the pair costs nothing. Put the prefixed line after the standard one, as the generated block does.

How do I make a glassmorphism card?

  1. Make sure the card has something behind it. backdrop-filter blurs what is painted underneath the element, so a card on a plain white page will look like a plain white card.
  2. Set blur first — 8 to 16 px covers most UI. Very high blur loses all sense of what is behind and stops reading as glass.
  3. Add background opacity until the card separates from the backdrop, then stop. Above about 0.35 you are just drawing a translucent white box.
  4. Raise saturation to bring the colour back, and set border opacity to draw the lit edge.
  5. Copy the block and paste it into your card's rule.

Why does my glass card look blank or wrong?

Two usual causes. The element or an ancestor has no backdrop to sample — backdrop-filter only affects what is already painted behind, not siblings drawn later. Or a parent creates a stacking or filter context that clips the effect; overflow: hidden, filter, transform and will-change on ancestors are the common offenders. Also remember that backdrop-filter is expensive: a handful of glass panels is fine, a scrolling list of them is not.

Is white tint always the right choice?

On light and mid-tone backgrounds, yes — a white fill at low alpha is the standard recipe and it is what this tool writes. Over a dark interface it often looks like haze; swap the rgba(255, 255, 255, …) values in the copied block for a dark tint and lower the border alpha. Build a suitable backdrop first in the mesh gradient generator or the gradient tool, and check the text on the card in the contrast checker — translucent surfaces are where contrast quietly fails. Everything renders in the browser.