Glassmorphism Generator

12 tools

Design a frosted-glass CSS effect visually.

Runs in your browser — your files and text stay on your device

Design Flexbox and Grid layouts, shadows, animations, easing curves, filters, and glassmorphism effects with live controls and a live preview instead of guessing values by hand — copy the generated CSS straight into your stylesheet.

Flexbox Playground Grid Generator Box Shadow Text Shadow Border Radius Clip Path Glassmorphism Animation Easing Curve Filter Fluid Typography Unit Converter

Blur12px

Fill opacity20%

Border opacity30%

Corner radius16px

Glass card

background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;

How to use this tool

1Adjust blur, fill opacity, border opacity, and corner radius.
2The preview shows the glass effect over a colorful background — it needs something behind it to blur.
3Copy the CSS and apply it to a card or panel element.

Frequently asked questions

Why doesn't the effect show on a plain white background?

backdrop-filter blurs whatever is behind the element — with nothing colorful or detailed behind it, there's nothing visible to blur.

Does backdrop-filter work in all browsers?

It's supported in all current major browsers; the -webkit- prefix included in the output covers older Safari versions.

Guides

All guides →