Tool Categories

CSS Backdrop Filter Generator

Glass morphism effects with backdrop filters

CSS Backdrop Filter Generator

Backdrop Filter Properties
Create glass morphism effects
10px
20%
12px
1px
30%
100%
100%
100%
Live Preview & CSS
See your glass morphism effect
Glass Morphism
Beautiful backdrop filter effect
.glass-element {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

Use backdrop-filter for glass morphism effects. Include -webkit-backdrop-filter for Safari support. Combine with semi-transparent backgrounds. Works best over colorful or textured backgrounds.