Glassmorphism CSS Generator
Create frosted-glass cards with live preview.
Tune the blur, tint opacity, corner radius and border of a glassmorphism card, see it live on a colored backdrop, then copy the complete CSS.
Backdrop color
Glass tint
12px
25%
20px
50%
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.50); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
How to create glassmorphism
- Choose a background color that sits behind the glass card.
- Pick the tint color and set its opacity.
- Adjust blur, border opacity and corner radius with the sliders.
- Copy the generated CSS into your project.
Frequently asked questions
What is glassmorphism?
It is a UI style that mimics frosted glass: a translucent panel over a colorful background, softened with a backdrop blur.
Why are there two blur properties in the CSS?
The webkit-prefixed property keeps the effect working in Safari and other browsers that need it.
Does backdrop-filter work everywhere?
It is supported by all modern browsers. Very old browsers will show a plain translucent panel without the blur.