New CSS Property For Web Developers: backdrop-filter
While browsing through Twitter as a progressive web application in my Android smartphone, I saw the blur effect in the header of the Twitter page. I like what I saw, so I did a search and came across backdrop-filter
, which only work with Chrome-based browsers at the moment and Firefox does not have support for it. For those with eyesight, here’s what it looks like:

backdrop-filter
property with a blur radius set to 5 pixels.Mozilla Firefox (as of 96) does not support backdrop-filter
CSS property.

backdrop-filter
property.An example of how the backdrop-filter
property is shown below:
main article { backdrop-filter: blur(5px); }
Until Firefox supports the backdrop-filter
filter right out of the box, I’m going to leave it off for now so both major browsers look the same.