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:

  1. Make semi-transparent background.
  2. 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.