Glassmorphism Generator

Design a frosted glass effect with blur, transparency, saturation, border and radius over a colorful backdrop, then copy the CSS, a Tailwind class list or a React style.

GLASS

4291 •••• 0083

Frosted card preview

Code

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

Settings

Blur16px

Transparency18%

Saturation160%

Border30%

Corner radius24px

Tint

Drop shadow

The glass effect only shows over something colorful. backdrop-filter works in all modern browsers; the -webkit- line covers older Safari.