Glassmorphism Generator

Create frosted glass UI effects with backdrop blur, opacity, and saturation controls.

Background Blur10px

Background Opacity20%

Border Opacity30%

Saturation180%

Background Color

Quick Presets

Preview bg:

drag to pan

css

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