Glassmorphism Generator
Create frosted-glass cards with backdrop blur and transparency.
Frosted glass in CSS
Glassmorphism gives cards a frosted-glass finish — translucent, softly blurred, with content glowing through from behind. It became a signature look of modern interfaces.
Set the blur, transparency, and tint and the preview updates over a colorful background. The generator outputs the full rule, including the backdrop-filter that does the frosting.
Modern and private
The CSS is generated in your browser, so nothing you enter is uploaded.
Frequently Asked Questions
What is glassmorphism?
A frosted-glass look made with a translucent background and a backdrop blur, so content behind shows through softly.
Does it need a background?
Yes. The effect only shows over a colorful or image background, since it blurs what is behind it.
Can I copy the CSS?
Yes. The full rule, including the backdrop-filter, is shown and copyable.
Browse the full set of free, private, in-browser tools.