Glassmorphism Generator

Design a frosted-glass card and copy the CSS, backdrop-blur and all. Runs entirely in your browser.

Blur10px
Transparency20%
Saturation120%
Corner radius16px
Tint#ffffff
CSS
background: rgba(255, 255, 255, 0.20);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.3);

Processed on your device. This file is never uploaded.

  1. 1Adjust the blur, transparency and tint.
  2. 2Watch the frosted card update over the backdrop.
  3. 3Copy the CSS into your project.

Frosted glass, dialled in

Glassmorphism is the frosted-panel look — a translucent card that blurs whatever it sits over. It depends on two things working together: a semi-transparent background and a backdrop blur. This generator lets you balance them by eye against a colourful backdrop, so you can see exactly how the effect reads before you ship it.

Copy-ready and prefixed

The output includes the -webkit-backdrop-filter prefix Safari needs and a subtle border and shadow that sell the effect. Paste it onto any element that has something visually busy behind it — that contrast is what makes the glass visible. It all runs on your device.

Frequently asked questions

What next?

All css tools →
Photo Filters
CSS Beautifier
Neumorphism Generator
Border Radius Generator
Box Shadow Generator
Gradient Generator