Glassmorphism Generator

v1.0.0

Design glassmorphism card effects with live preview and copy the generated CSS.

Blur (12px)

BG opacity (20%)

Border opacity (30%)

Border radius (16px)

Shadow intensity (30%)

Background colour

#ffffff

CSS

.glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.30);
}

Preview

Glass Card

Glassmorphism preview