This article is all about the proper use of the CSS backdrop-filter property, which can be used to create some of the coolest graphical effects of all CSS history so far…
It works exactly the same as the regular CSS filter property, the only thing that's different is that it effects the backdrop (eg. what's behind the background) instead of the entire element itself. Unfortunately, at the time of writing, it cannot be animated, but the regular filter is… so you'll have to be clever.
This will probably be your most used-case for the property:
Now, if you're observant you probably noticed that I used the @supports rule in conjunction with the backdrop-filter property… the reason for that is that you're going to want a fallback with a solid background.
Anyway, that's about it for your casual use… here are the rest of the potential values of the CSS backdrop-filter property. They're pretty self-explanatory, so I won't bother going into any little detail anyway.