Glassmorphism Generator
Tune the tint, blur and border of a frosted glass card on a live preview, then copy it as Tailwind classes or plain CSS.
Glass card
Frosted glass sits over whatever is behind it. Move the sliders to adjust the effect.
bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl shadow-lg
background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
Frequently asked questions
How do I make a glass effect in Tailwind CSS?
Combine a translucent background, a backdrop blur and a faint border: bg-white/20 backdrop-blur-md border border-white/30 rounded-2xl. The element needs something behind it, such as an image or colored shapes, for the blur to show.
Why is my backdrop-blur not working?
The blur only affects what is behind the element, so a plain white page shows nothing. Also check that the background is partly transparent, and that no parent has overflow or opacity settings that create a new stacking context.
Does backdrop-filter work in all browsers?
It is supported in current Chrome, Edge, Safari and Firefox. Older Safari versions need the -webkit- prefix, which the raw CSS output includes.
Is glassmorphism bad for accessibility?
It can be, because text contrast changes with whatever is behind the card. Keep the background opacity high enough for text to stay readable, and check the result with the contrast checker.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.