backdrop-filter is a pretty neat tool in CSS that allow you to add filters to elements behind the target element. That differs from the
filter property, which applies a filter to the targeted element itself. They both use the same filter types, so once you've learn one you can apply the same knowledge to the other.
backdrop-filter works on most modern browsers except Firefox (see Can I Use). You should be able to enable it in Firefox by setting the
layout.css.backdrop-filter.enabled preference to
true in about:config, but I couldn't get it to work.
Here's the pen, feel free to play around with it to make your own combination of filter styles! I built it in Vue, and you can add as many filter layers as you want, remove them and move them around to get all sorts of effects. Try scrolling the page to see how
backdrop-filter affects different parts of the background:
You can learn more about
backdrop-filter in the MDN Web Docs.