Glassmorphism Generator
Get the frosted glass look for cards and panels, and see it over your own background.
- Your data never leaves your device
- 100% free
- No sign-up
- Works offline after first load
How to make a glassmorphism effect
- Adjust blur, transparency, saturation and tint.
- Preview it on the colourful background or your own image.
- Copy the CSS, Tailwind or SCSS.
About Glassmorphism
Make frosted-glass CSS effects.
Everything works in your browser, so it is instant and private. Your recent colours and settings are remembered on this device, and the address bar keeps your colour so you can share or bookmark it.
Good for
- Hero cards and overlays
- Navigation bars and modals
- Dashboards and widgets
Tip: Keep enough contrast: add a darker tint or dark text when the background is light.
Frequently asked questions
How does the glass effect work?
A semi-transparent background plus backdrop-filter: blur() blurs whatever is behind the element. A light border and soft shadow make the edge read as glass.
Does it work in every browser?
backdrop-filter works in all current browsers; the code includes the -webkit- prefix for Safari. Where it is unsupported the card simply shows its translucent colour.
Why can I not see the effect?
Glass needs something behind it — use the colourful background or your own image to preview it.
Which background works best?
A colourful or detailed one, such as a photo or gradient, makes the blur visible. Over a plain colour the glass just looks like a flat, see-through box.
Is glassmorphism accessible?
Only if the text stays readable. Use enough tint and check the text colour against the busiest part of the background with the contrast checker.