Glassmorphism Generator
Build frosted-glass cards with backdrop-filter, tune the
blur, transparency and saturation over a live backdrop, and copy the CSS.
Frosted-glass UI in a few sliders
Glassmorphism gives panels a soft, layered, premium feel. The recipe is
a translucent background plus a backdrop-filter blur and a
faint light border. This generator wires those together so you can dial
in the exact frost you want and copy the result.
Tuning tips
- Blur — more blur means a heavier frost; 8–16px reads as glass without hiding the background entirely.
- Transparency — lower opacity lets more of the backdrop through. Around 20–30% is the sweet spot.
- Saturation — boosting it makes the blurred colors behind the glass pop.
- Tint & border — a white tint and a faint white border sell the glass edge.
Frequently asked questions
What is glassmorphism?
Glassmorphism is a UI style where a panel looks like frosted glass — semi-transparent, blurred behind, with a subtle light border. It's built in CSS with a translucent background plus backdrop-filter: blur().
What does backdrop-filter do?
backdrop-filter blurs and adjusts whatever sits behind the element, not the element's own content. That blur of the background is what gives glassmorphism its signature frosted look.
Does it work in all browsers?
backdrop-filter works in current Chrome, Edge, Safari and Firefox. The tool also outputs the -webkit-backdrop-filter prefix for older Safari. The element needs something colorful or detailed behind it for the effect to show.
Why can't I see the blur on a plain page?
The frosted effect only appears over content. Place the glass card on top of an image or gradient — the preview here uses a colorful backdrop so you can see it clearly.
Is anything sent to a server?
No. The preview and CSS are generated entirely in your browser. Nothing is uploaded or stored.