Glassmorphism CSS Generator
Frosted glass over any background, with a text-contrast check that sees through the blur.
Preview
Drag the panel (or focus it and use the arrow keys, Shift for bigger steps). The ring marks where the text contrast is lowest.
Glass
Text contrast
Measured on the panel’s text area (inside its 24px padding), after the blur, saturation, brightness and tint the CSS applies — the same steps the browser takes.
Code
About the Glassmorphism CSS Generator
Design a frosted-glass panel — the translucent, blurred cards of glassmorphism — and see it over a real background while you work. Set the backdrop blur, saturation and brightness, the tint color and how opaque it is, the border, corner radius, drop shadow and a light top edge; then drag the panel over a gradient, a mesh gradient, the colorful shapes behind it, or a photo of your own, which never leaves your device.
Glass is beautiful and easy to make unreadable, because the text sits on whatever happens to be behind it. The Text contrast check repeats what the browser does — it blurs the backdrop under the panel, applies the saturation, brightness and tint, then measures your text color against every spot of the panel’s text area — and reports the lowest and typical contrast against WCAG’s 4.5:1 (3:1 for large text), marks the worst spot and offers fixes such as the tint opacity that passes. The CSS includes the -webkit-backdrop-filter line older Safari needs and an optional fallback for browsers without backdrop-filter; Tailwind classes and the matching HTML are a click away.
How to use it
- Pick a background: a gradient or mesh preset, or Image to use your own picture. Keep Shapes behind the glass on to see the blur at work.
- Choose a glass style, then fine-tune blur, saturation, brightness, tint color and opacity, border, radius and shadow.
- Drag the panel (or focus it and use the arrow keys) over the busiest parts of the background, and set the text color and size.
- Read Text contrast: if the lowest value is below the target, use the suggested tint opacity or text color, or more blur.
- Copy the CSS, Tailwind classes or HTML — with or without the background — or download the CSS.
Examples
Light frost · Sunset gradient, no shapes · 800 × 450 preview, 320 × 200 panel in the middle · text #0f172a
.glass {
background: rgb(255 255 255 / 0.22);
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.4);
border-radius: 20px;
box-shadow: 0 8px 32px rgb(0 0 0 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.45);
color: #0f172a;
}Lowest contrast 5.50:1, so normal text passes everywhere on the glass.
Clear glass (8% white tint, 6px blur), white large text · Sunset gradient with the shapes · same preview size
Lowest contrast 1.78:1 — the text fails on 43% of the glass (needs 3:1).
A light shape shines straight through a thin tint. Black text would reach 5.45:1 there, or a heavier tint and more blur keep white text readable.
Light frost · Code: Tailwind
bg-[rgb(255_255_255/0.22)] backdrop-blur-[16px] backdrop-saturate-[180%] border border-[rgb(255_255_255/0.4)] rounded-[20px] shadow-[0_8px_32px_rgb(0_0_0/0.12),inset_0_1px_0_rgb(255_255_255/0.45)] text-[#0f172a]
Common uses
- Cards, navigation bars, modals and sidebars over photos or colorful hero sections.
- Checking that an existing glass design keeps its text readable over every part of the background.
- Trying a glass style over your own product photo or wallpaper before building it.
- Learning how blur, saturation and tint opacity change the look and the readability.
How backdrop-filter makes glass
backdrop-filter applies filter functions to whatever is painted behind an element, clipped to the element’s border box and its rounded corners; the element’s own background is then painted on top (Filter Effects Level 2). So the effect only shows when that background is partly transparent — the tint. blur() takes the standard deviation of a Gaussian blur, saturate() above 100% makes the colors coming through more vivid, and brightness() lightens or darkens them. Chrome, Edge and Firefox support backdrop-filter unprefixed; Safari supports it unprefixed from version 18 and with the -webkit- prefix before that, so the CSS writes both (MDN).
How the contrast check works
The check samples the background and shapes under the panel (a few pixels per sample), blurs them with three box blurs — the approximation of a Gaussian blur that the SVG filter specification describes — with mirrored edges as the spec asks for backdrops, applies the saturate and brightness matrices in sRGB like the browser, paints the tint over them and compares the text color with each sample using the WCAG formula (the predicted colors are tested against what Chromium actually draws). The panel’s 24px padding is left out, because text does not go there. Normal text needs 4.5:1 and large text (24px, or 18.66px bold) 3:1 (WCAG 2.2 SC 1.4.3); ratios are never rounded up. The ring on the panel shows where the contrast is lowest — drag the panel around to test every part of your background.
Making glass readable
- Raise the tint opacity until the lowest contrast passes; the check offers the exact value.
- Prefer more blur over less: it averages out sharp details behind the text.
- Use dark text on light, frosty glass and white text on dark glass, and avoid thin, light fonts.
- Keep busy, high-contrast parts of photos away from text, or darken the photo itself.
- Provide a fallback: browsers without
backdrop-filtershow the background unblurred, so the CSS can give them a more opaque tint, which the tool calculates.
Limitations
- The check samples the backdrop every few pixels and uses the same blur approximation browsers commonly use; results can differ by a small amount from what a particular browser draws, especially near very sharp, tiny details.
- Only the text color is checked, not icons, borders or the panel’s edge against the page (WCAG 1.4.11 needs 3:1 for icons that carry meaning).
- backdrop-filter is costly to draw. Animating the blur or using many large glass panels can make scrolling stutter on slower phones.
- In the specification an ancestor with a filter, opacity below 1, a mask or clip-path, its own backdrop-filter or a mix-blend-mode becomes a “backdrop root”: the glass then only blurs what is painted inside that ancestor.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
Why does my backdrop-filter do nothing?
Three usual reasons: the element’s background is fully opaque (use a tint such as rgb(255 255 255 / 0.2)), there is nothing detailed behind it to blur (a flat color looks the same blurred), or an ancestor has a filter, opacity below 1, a mask, a clip-path or a blend mode, which limits the backdrop to what is inside that ancestor. Older Safari also needs -webkit-backdrop-filter, which the CSS here includes.
Is glassmorphism accessible?
It can be, if the text stays readable over every part of the background. The check here measures the lowest contrast on the glass after the blur and tint; aim for 4.5:1 for normal text. Users who turn on reduced transparency in their system may also prefer a solid fallback.
How do I make glassmorphism in Tailwind CSS?
Combine a translucent background, a backdrop blur and usually a saturation boost: bg-[rgb(255_255_255/0.22)] backdrop-blur-[16px] backdrop-saturate-[180%], plus a light border and a shadow. The Tailwind tab writes all of them with arbitrary values that work in Tailwind v3 and v4.
Can I use my own background picture?
Yes. Choose Image and pick or drop a picture. It is read on your device, shown behind the glass and used by the contrast check; nothing is uploaded.
What do the numbers in the contrast check mean?
Lowest contrast is the weakest spot of the text area, which decides whether it passes. Typical is the median of all spots, and Area that passes is the share of the text area that meets the target.
Is anything uploaded?
No. The glass, the contrast check and your picture stay in your browser; the page works offline once loaded.