✨ Design tool · 100% in-browser

Glassmorphism Generator

Create the trendy frosted-glass effect with a live preview, then copy the CSS.

Glass
Blur (12px)
Transparency (25%)
Saturation (120%)
Radius (18px)
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.35);
🔒 Generated on your device

How to create frosted glass

  1. Adjust blur and transparency. The core of the glass look.
  2. Fine-tune. Saturation, radius and an optional border.
  3. Copy the CSS. Apply it over a colourful background.

Frequently asked questions

What is glassmorphism?

It's a design style with a frosted-glass look — a semi-transparent surface with a blurred background behind it, a subtle border and rounded corners.

Will it work in every browser?

The effect uses backdrop-filter, which is supported in all modern browsers. We include the -webkit- prefix for wider support.

How do I use the CSS?

Copy the code and apply it to an element that sits over a colourful or image background so the blur has something to work with.

Is anything uploaded?

No. Everything runs in your browser.