All tools

CSS Glassmorphism Generator

Frosted glass effect with backdrop-filter.

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

Glassmorphism needs something colorful behind the element to actually look frosted. backdrop-filter is supported in all major browsers but Safari needs the -webkit- prefix.

About

Adjust blur, opacity, border, and corner radius to design a frosted glass card. Live preview over a colorful background, copy the CSS when it looks right.

How to use

  1. Tune the sliders.
  2. Compare against the gradient backdrop.
  3. Copy the CSS.

FAQ

Why does it look fine in the preview but flat in my page?+

Glassmorphism needs something colorful behind the element. On a plain white page there's nothing to blur, so it disappears.

Does Safari need anything special?+

Yes. Add the -webkit-backdrop-filter prefix in addition to backdrop-filter. The generated CSS includes both.