Wow! This is a cool feature. This property frees me from the hassle of using a separate div for blur and positioning it behind the content using z-index. How did I miss this during my research? Thank you @palle
for pointing out the existence of this property 👍🏽
There is a CSS attribute
backdrop-filter
, which applies an effect to whatever is behind the element that has the attribute.And that's it. Similar effect (except the noise).
Also, this doesn't make the edges of the blurred content appear transparent.
Sadly this only works in Safari and apparently the next version of Edge.
Here's an example.
Wow! This is a cool feature. This property frees me from the hassle of using a separate
div
forblur
and positioning it behind the content usingz-index
. How did I miss this during my research? Thank you @palle for pointing out the existence of this property 👍🏽Only supported by Safari and chrome (behind flag).
Thanks for the heads up 👍🏽