Glassmorphism Generator
Design frosted glass and neumorphic surfaces with a live preview.
Runs entirely in your browser.
Your data never leaves this device and is never sent to our servers.
CSS
The frosted glass effect is backdrop-filter plus a translucent background and a light border. Getting it to look right depends on what sits behind it, so this generator previews the surface over an image rather than a flat colour.
How to use it
- Adjust blur, transparency and border.
- Check the preview over a busy background.
- Copy the CSS.
Not working as you expect? Report a problem with this tool.
Frequently asked questions
Does backdrop-filter work everywhere?
It works in all current browsers, though Firefox needed a flag until recently. Always provide a solid background colour as a fallback.
Why does it hurt performance?
backdrop-filter forces the browser to re-composite everything behind the element. Use it sparingly, and avoid animating it.
Is glassmorphism accessible?
Only if you check it. Text over a translucent surface can fail contrast depending on the background — verify it with the Contrast Checker.