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.
Top comments (0)