filter and backdrop-filter

Blur, brighten and tint elements — and build that frosted-glass effect everyone wants with backdrop-filter.

The filter property applies graphic effects to an element itself, while backdrop-filter applies them to whatever sits behind a semi-transparent element. That second one is the secret behind the “frosted glass” look in modern UIs.

filter functions worth knowing

blur(6px), brightness(1.2), contrast(1.4)
grayscale(1), sepia(0.6), saturate(2), hue-rotate(90deg)
drop-shadow(0 4px 8px rgba(0,0,0,.3)) — unlike box-shadow, it follows the element's actual shape, including transparency in PNGs and irregular clip paths.

Chain several in one declaration: filter: grayscale(1) brightness(1.1). They apply in order.

Frosted glass with backdrop-filter

.panel {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(1.4);
}

The panel must be partly transparent for the blurred backdrop to show through. That's the whole trick.

Example

Loading editor…

Press Run to see the result.

When to use it

A developer uses filter: blur(4px) on a hero image to create a soft background while keeping foreground text sharp.
A designer applies backdrop-filter: blur(12px) to a sticky navigation bar so the content scrolling behind it appears frosted.
A developer uses filter: grayscale(1) on project portfolio images and removes it on hover to reveal color in an engaging reveal effect.

More examples

Image hover with grayscale filter

Applies a grayscale filter to all images and removes it on hover for a dramatic color reveal transition.

.portfolio-img {
  filter: grayscale(1) brightness(0.9);
  transition: filter 0.3s ease;
}
.portfolio-img:hover {
  filter: grayscale(0) brightness(1);
}

Frosted glass nav with backdrop-filter

Creates a frosted-glass sticky navigation bar using backdrop-filter: blur on a semi-transparent background.

.nav {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  border-bottom: 1px solid rgba(255,255,255,0.4);
  z-index: 100;
}

Multiple filter functions chained

Chains contrast, saturation, brightness, and drop-shadow filters to stylize a hero image entirely in CSS.

.dramatic-hero {
  filter:
    contrast(1.2)
    saturate(1.4)
    brightness(0.9)
    drop-shadow(0 4px 16px rgba(0,0,0,0.4));
}

Discussion

Be the first to comment on this lesson.