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);

Related tools

CSS Gradient GeneratorCSS

Build beautiful CSS gradients visually with a live preview.

Box Shadow GeneratorCSS

Create CSS box-shadow values visually with multiple shadows and live preview.

Border Radius GeneratorCSS

Visual CSS border-radius editor with per-corner control.

Flexbox PlaygroundCSS

Interactive CSS flexbox layout builder with live preview.

CSS Grid GeneratorCSS

Visual CSS Grid layout generator with cell spanning.

CSS Animation GeneratorCSS

Build CSS @keyframes animations visually with live preview.