Home/Glassmorphism Generator

Glassmorphism Generator

Design frosted-glass cards with a live preview — blur, tint, border and shadow. Copy CSS or Tailwind in one tap.

Runs in your browser
No upload on server
Free, forever

Pick input
Tweak
Copy / export

How this works— tap to see the steps

1
Tune blur & opacity
Move the blur, transparency and border sliders. The card preview updates instantly.
2
Pick a background
Try different bg colours or images — glass looks different depending on what's behind it.
3
Copy the CSS
Grab the ready-to-paste rule, backdrop-filter and all.

Watch: sliders → frosted glass CSS

Settings

Blur14px

Transparency25%

Saturation160%

Corner radius20px

Border strength30%

Tint color

Preview mode

Background preset

Live preview

Frosted glass

Live preview of your card

CSS

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);

Tailwind

bg-white/25 backdrop-blur-lg border border-white/30 rounded-[20px] shadow-lg

How this works — and why it's private

Drag the sliders to set blur, transparency and corner radius until the card looks right.
Pick a tint color and a background preset to test against light and dark scenes.
Copy the CSS or Tailwind classes and paste them into your project.

Rate Glassmorphism Generator

One tap. Anonymous. Helps others find the good tools.

No account, no email, no tracking — just a 1–5 number.

Be the first to rate