DIY: A Web Version of the Fluent Design System’s Acrylic Material
Using backdrop-filter on Microsoft Edge and other modern browsers
“It’s the dark arts.”
That’s what a colleague of mine said one day as we were walking to lunch talking about people with CSS expertise. He went on to compare it to the more traditional forms of computer science (math) and visual design (art). “But people with CSS skills, man…” he sighed, “it’s the dark arts.”
This has been especially true for those of us who make web sites work across browsers and operating systems. All the cross browser hacks, CSS feature detection, positioning tricks, etc… a front-end dev must collect and manage a library of spells to be successful at their work.
Well, here’s another one for your book of incantations. I’m going to show you how to use backdrop-filter today. Grab your pointy hat.
What is backdrop-filter?
Here’s what caniuse.com says:
“Method of applying filter effects (like blur, grayscale or hue) to content/elements below the target element.”
You’ve seen this effect in the Fluent Design System’s Acrylic Material as well as in iOS. If you wanted to bring this effect into your designs on the web, well, you had to hex your users into using only Safari, and of course you didn’t because you’re a good wizard, we know. This is because Safari was the only browser that supported backdrop-filter out of the box. Until now, anyways. With the April 2018 release of Windows, Edge 17 supports backdrop-filter using the -webkit prefix.
The how-to part
backdrop-filter is still very new and if it had widespread browser adoption, this article would be a very short one consisting of the following:
Put this on your CSS element if you want to blur whatever is behind itbackdrop-filter: blur(20px);
Of course, if your element has a solid color background, you won’t see any difference, so make sure you’re using a color formula (RGBA, HSLA, etc…) where you can control the opacity like so:
backdrop-filter: blur(20px);
background-color: rgba(255,255,255,.3);But this only works in Safari. To get that goodness in Edge, use the -webkit prefix:
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
background-color: rgba(255,255,255,.3);Of course, a quick trip to caniuse.com confirms something we might already know: this only works in Edge and Safari (and iOS). What about the others? Firefox and Chrome don’t support it yet, so we’ll have to use a fallback for that.
Meanwhile at Hogwarts…
Hermione Granger (raising hand frantically): Actually, Mr. Day, Chrome has support for it if you enable Experimental Web Platform Features at chrome://flags, but we can’t expect users to have this, so for now we’ll have to treat it like the other browsers that do not support it.
Me: Thanks for that, Miss Granger. You’re absolutely correct. You may put your hand down now.
Enter the @supports query.
This handy little query, very similar to a media query, enables you to define rules if the browser supports specific CSS properties. I won’t go in depth on it here, if you want to learn more, Mozilla’s Jen Simmons has your back. So, let’s say we decide that our element should be 90% opaque white when the browser does not support backdrop-filter.
background-color: rgba(255,255,255,.9);@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
background-color: rgba(255,255,255,.3);
}
Works like a charm. Now in Edge and Safari, your users will witness the magic of backdrop-filter, while those on Firefox and Chrome will not know what they’re missing. Magic.
One step further: Fluent Acrylic Material
For those of you who are coming away from Microsoft Build 2018 inspired to breathe some Fluent design into your experiences, here’s what the Fluent team does to create Acrylic Material on their transient surfaces on the web:
backdrop-filter: blur(30px) saturate(125%);Noticeably, this does not include the noise or the exclusion layer that you find in the UWP documentation, but it does dial up the saturation to get a bit more color.
I hope this is helpful for you. If you have any questions or try it out, leave a comment below!
Find out more
Learn more about Fluent Design and join the diverse community of creators at Fluent Design’s LinkedIn Group
Follow Microsoft Design on Dribbble, Twitter, and Medium
And don’t forget to check out #FluentFridays on Twitter!
To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.
