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)