devhexlab

Glassmorphism Generator

Generate glassmorphism CSS with live preview — adjust blur, opacity, saturation, and border radius

glassmorphismcssbackdrop-filterblurglass
Mode
Blur12px
Background opacity15%
Border opacity30%
Saturation150%
Border radius16px
Shadow intensity50%

Background theme

Glass Card

Glassmorphism effect

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

Related Tools

CSS Animation Generator

Build CSS keyframe animations visually — choose a preset, tweak timing and duration, copy the CSS

Box Shadow Generator

Create CSS box-shadow values with sliders and live preview

CSS Gradient Generator

Build linear and radial gradients visually and copy the CSS