Frosted Glass Effect
The backdrop-filter property is a modern web hit. It applies filters not to the block itself, but to what's under it.
Glassmorphism (Glass Design)
To create frosted glass effect:
- Make semi-transparent background.
- Add blur via
backdrop-filter.
.glass-header {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
Important
For backdrop-filter to work, element's background MUST be semi-transparent. If background is solid, you simply won't see blur under it.