DEV Community

Translucency with Transparency

Vijay Koushik, S. 👨🏽‍💻 on March 07, 2018

Hello world! So Windows 10 has been around for 2 years now with its attractive (it really is) colourful user interface, fancy start menu and live t...

Read full post

Palle • Mar 14 '18 • 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.

Vijay Koushik, S. 👨🏽‍💻 • Mar 14 '18 • 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 👍🏽