Glassmorphism generator: frosted glass CSS and Tailwind
Design frosted glass cards live: blur, transparency, saturation, border and tint over a real background. Copy the CSS or Tailwind classes. Free and instant.
.glass {
background: rgb(255 255 255 / 0.18);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgb(255 255 255 / 0.35);
border-radius: 22px;
}
bg-white/18 backdrop-blur-[20px] backdrop-saturate-[1.6] border border-white/35 rounded-[22px]
How to use it
- 1Pick a background so you can judge the glass against real color.
- 2Adjust blur and transparency until text stays readable.
- 3Add saturation for richer color through the glass, and a light border for the edge.
- 4Copy the CSS or the Tailwind classes.
What makes glass readable
Glassmorphism fails when text sits on a busy background. Enough blur (16 to 28 pixels) removes detail, a fill of 10 to 30 percent white or black evens out brightness, and a slight saturation boost keeps the color behind from turning grey. The contrast readout in the tool checks your text against the average color under the glass.
The CSS behind it
.glass {
background: rgb(255 255 255 / 0.18);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgb(255 255 255 / 0.35);
border-radius: 20px;
}
backdrop-filter needs something behind the element to blur. On a flat background, glass just looks grey, so place it over imagery, gradients or content.
A whole glass theme
If you want every surface in a product to become glass, set it at the token level rather than per component. MiniDev UI does this with data-material="glass", which the glassmorphism in Tailwind guide walks through.
Frequently asked questions
Is backdrop-filter supported in all browsers?
Yes, in all current major browsers. Safari needs the -webkit-backdrop-filter prefix, which the generated CSS includes.
Does glassmorphism hurt performance?
Blur is computed every frame for whatever sits behind the element. Keep glass to a few large surfaces and avoid animating many blurred layers at once.
How do I make glassmorphism accessible?
Blur enough to remove background detail, add a tint, and check text contrast. Provide a solid fallback for users who enable reduced transparency.