Menu
Recently I found 2 similar properties and can't figure out what's the differences between them.
Can you explain me please? Why does properties backdrop-filter and filter exists at the same time?
As I see (here and here) they do the same things:
grayscale()sepia()saturate()hue-rotate()invert()opacity()brightness()contrast()drop-shadow()When we should use backdrop-filter and when just filter?
caniuse.com says (here and here) that modern browsers supports filter much better than backdrop-filter.
662
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
BROWSER SUPPORT FOR CSS Backdrop Filter This property is not supported by default but can be enabled for Chrome 47 to 67.
The ::backdrop CSS pseudo-element is a box the size of the viewport which is rendered immediately beneath any element being presented in fullscreen mode. This includes both elements which have been placed in fullscreen mode using the Fullscreen API and <dialog> elements.
According to https://iamvdo.me/en/blog/advanced-css-filters, filter will affect the element itself, and backdrop-filter will affect the elements beneath the element within the bounding box of the element. It looks like a page with a black body and an element with backdrop-filter: invert(); would turn that part of the body white.
backdrop-filter: invert();
This codepen shows that to be the case, in Chrome, with Experimental Web Platform features enabled in chrome://flags.
https://codepen.io/Jason_B/pen/wpjQGK
191
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
