Glassmorphism Generator

Generate CSS glassmorphism (frosted glass) effects with live preview

Preview

Glass Effect

This is a glassmorphism effect with blur, opacity, and border styling.

Controls

Presets

Background Blur20px

Opacity0.40

Border Radius16px

Border Width1px

Border Opacity0.50

Background Color

rgb(255, 255, 255)

Saturate180%

Brightness95%

CSS Output

.glass {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px) saturate(180%) brightness(95%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
}

Loading tool...