Glassmorphism Generator

Create frosted glass CSS effects with blur, transparency, border, and background controls.

Preview

Glass Card

This is a glassmorphism effect.

BG Start

BG End

Settings

Glass Color

Blur16px

Opacity20%

Saturation180%

Border Opacity30%

Border Radius16px

CSS Code

background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.30);

Was this page helpful?

Glassmorphism Generator

Related tools