Glassmorphism Generator

Live generator for glass-style UI panels. Adjust values and copy the CSS.

Glass ColorGlass Opacity: 0.5Blur (backdrop-filter): 12pxsaturate (backdrop-filter): 100%Shadow Depth: 12pxGradient Background

Enable subtle gradient

Preview

Generated CSS

/* Glassmorphism CSS */
.container {
 background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.175) 100%);
  backdrop-filter: blur(12px) saturate(100%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.02);
  overflow: hidden;
}