Day 24: the backdrop-filter property

posted on 27.10.2022

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

The backdrop-filter property allows you to apply CSS filters to the area behind an element. This could be the background of an element or the backdrop of a dialog.

In the following example, the parent element has a background image, nothing special about it, but the inner elements all have a backdrop-filter applied which changes how the image beneath them is displayed.

<div class="parent">
  <div class="blur">Blur</div>
  <div class="invert">Invert</div>
  <div class="hue">Hue</div>
  <div class="grayscale">Grayscale</div>
</div>

.parent {
  background-image: url("/images/neue-donau.webp");
}

.blur {
  backdrop-filter: blur(5px);
}

.invert {
  backdrop-filter: invert(1);
}

.hue {
  backdrop-filter: hue-rotate(260deg);
}

.grayscale {
  backdrop-filter: grayscale(100%);
}

Blur

Invert

Hue

Grayscale

Notice how the filters don’t affect the text? Yeah, that’s the difference between backdrop-filter and filter. They both take the same values, but backdrop-filters only apply to the backdrop/background. In order for this to work the background of the element with the backdrop filter must either be fully or partially transparent.

You can also apply the filter to the backdrop of a dialog.

dialog::backdrop {
  backdrop-filter: blur(5px);
}

PS: Thanks Kilian for the pointer!

See on CodePen

Day 24: the backdrop-filter property

Further reading