backdrop-filter for Frosted Glass
Create frosted glass blur effects on elements overlaid on other content using backdrop-filter.
What is backdrop-filter?
backdrop-filter applies graphical effects to the area behind an element rather than to the element itself. The element must have some transparency (background with alpha < 1 or no background) to reveal the filtered backdrop.
Frosted Glass Effect
The classic frosted glass pattern:
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 12px;
}All lessons in this course
- filter: blur brightness contrast grayscale
- backdrop-filter for Frosted Glass
- mix-blend-mode for Layer Blending
- isolation Property