DEV Community

Discussion on: Translucency with Transparency

Collapse
 
palle profile image
Palle • Edited

There is a CSS attribute backdrop-filter, which applies an effect to whatever is behind the element that has the attribute.

.container {
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px) saturate(160%) contrast(45%) brightness(140%);
    -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(45%) brightness(140%);
}

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.

Collapse
 
svijaykoushik profile image
Vijay Koushik, S. 👨🏽‍💻 • Edited

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 👍🏽

Collapse
 
equinusocio profile image
Mattia Astorino

Only supported by Safari and chrome (behind flag).

Thread Thread
 
svijaykoushik profile image
Vijay Koushik, S. 👨🏽‍💻

Thanks for the heads up 👍🏽