Glassmorphism Generator

Design a frosted-glass card with backdrop blur and transparency, then copy the CSS.

Glass

Blur8px

Transparency0.25

Radius16px

Tint

Border

CSS

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

The frosted look comes from a semi-transparent fill plus backdrop-filter: blur(). Note backdrop-filter isn't supported in every browser. Runs locally.