backdrop-filter vs filter
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.
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
