Glassmorphism Generator

Create frosted-glass CSS effects visually

Background

Glass Properties

Base Color
#FFFFFF
Blur12px
Transparency18%
Border Opacity30%
Border Radius16px
Shadow Blur24px
Saturation180%
Glass Card
Frosted glass effect using backdrop-filter

Generated CSS

.glass {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

Quick Copy Snippets

backdrop-filter: blur(12px) saturate(180%);
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.30);
Feedback