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.