Glassmorphism generator

.glass {
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

bg-white/20 backdrop-blur-lg backdrop-saturate-180 border border-white/30 rounded-2xl shadow-[0_8px_32px_rgba(0,0,0,0.15)]

How the glass effect works

• A see-through fill. The card's background is a colour with low opacity — rgba(255, 255, 255, 0.2) is white at 20% — so what is behind it still shows.
• backdrop-filter: blur() frosts what is behind. Unlike filter, which blurs the element itself, backdrop-filter blurs the page painted behind the element, inside the element's own shape. The card's text stays sharp.
• saturate() keeps colours alive. Blurring mixes neighbouring colours and they go dull; a saturation above 100% brings them back. 100% means no change, so the tool leaves it out.
• A thin light border and a soft shadow mark the card's edge, like light catching the rim of a pane of glass.

Browser support

The standard backdrop-filter works in Chrome 76 and later, Edge 79 and later, Firefox 103 and later and Safari 18 and later. Older Safari, on Mac and on iPhone, understands only the prefixed -webkit-backdrop-filter. Chrome is the other way round: on its own, the prefixed line does nothing there (we checked — in Chrome 154 it computes to none). That is why the CSS this tool writes always has both lines, with the same value.

How we test it

For 424 different settings, the CSS is pasted exactly as you would copy it into Chrome, and the browser's computed background, backdrop filter, borders, corner radii and shadow (4,664 values in all) must equal the settings you chose — for the preview on this page too. The Tailwind classes are compiled with Tailwind CSS 4.3.3 and must compute the same: filters, borders, radii and shadows exactly, and colours to within 0.5/255 of a colour channel (Tailwind writes them as color-mix(), and Chrome stores rgba() at 8 bits). Then screenshots of 42 settings over a striped backdrop check that the blur really blurs: at 4px or more the stripes keep at most 2.5% of their contrast (the test fails above 25%). Each check is also run against deliberately broken versions of the generator (6 kinds), and each one must catch them.

Questions

Why can't I see the blur?

backdrop-filter blurs what is painted behind the element. Over a flat colour there is nothing to blur, so the card just looks tinted — pick the Plain backdrop above to see this. Put the card over a photo, a gradient with shapes, or other content. Also check that the fill is not close to 100% opacity, which hides the backdrop completely.

Is text on glass readable?

Not always, and that is the main risk of this style. The colour behind the text changes as the backdrop changes, so a contrast that passes over one part of the page can fail over another. Check your text colour against the lightest and the darkest colour that can show through — for example with a WCAG contrast checker — and raise the fill opacity or the blur until both pass.

What about browsers without backdrop-filter?

They ignore the line and draw the see-through fill without the blur, which can make text hard to read. Give them a more solid fill: @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background-color: rgba(255, 255, 255, 0.85); } }

Is backdrop-filter slow?

It costs more than a plain background, because the browser has to blur the area behind the element every time that area changes — while scrolling, or when something animates behind it. A few glass cards are fine; many large ones with a big blur over moving content can make scrolling stutter on slower phones. Test on a real device.

Which Tailwind classes does it give?

Tailwind CSS v4. Values on Tailwind's scale get named classes: the blur scale, read from the tailwindcss package, is backdrop-blur-xs = 4px, backdrop-blur-sm = 8px, backdrop-blur-md = 12px, backdrop-blur-lg = 16px, backdrop-blur-xl = 24px, backdrop-blur-2xl = 40px, backdrop-blur-3xl = 64px; a white or black fill becomes bg-white/20 or bg-black/30; a 1px border is border; radii use the rounded-* scale; the five named shadows are Tailwind's own. Anything else becomes an arbitrary value such as backdrop-blur-[10px], bg-[#6366f1]/25 or rounded-[20px]. Tailwind's backdrop utilities write both backdrop-filter lines for you.

Shape the card with the border radius generator or the clip-path generator, or turn existing CSS into classes with the CSS to Tailwind converter.