Backdrop Filter Properties
Create glass morphism effects

Glass Properties

10px
20%
12px
1px
30%

Additional Filters

100%
100%
100%
Live Preview & CSS
See your glass morphism effect

Live Preview

Glass Morphism
Beautiful backdrop filter effect

Generated CSS

.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);
}
Backdrop Filter Tips:

• 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