This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
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%);
}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!
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-10-27T00:00:00+00:00) Day 24: the backdrop-filter property. Retrieved from https://www.scien.cx/2022/10/27/day-24-the-backdrop-filter-property-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.