The landing page for Apple Arcade has a cool effect where some “white” text has a sort of translucent effect. You can see some of the color of the background behind it through the text. It’s not like knockout text where you see the exact background. In this case, live video is playing underneath. It’s like if you were to blur the video and then show that blurry video through the letters.
Well, that’s exactly what’s happening.
Here’s a video so you can see it in action (even after they change that page or you are in a browser that doesn’t support the effect):
And hey, if you don’t like the effect, that’s cool. The rest of this is a technological exploration of how it was done — not a declaration of when and how you should use it.
There are two main properties here that have to work together perfectly to pull this off:
The backdrop-filter property is easy as heck to use. Set it, and it can filter whatever background is seen through that element.
See the Pen
Basic example of backdrop-filter by Chris Coyier (@chriscoyier)
on CodePen.
Next we’ll place text in that container, but we’ll actually hide it. It just needs to be there for accessibility. But we’ll end up sort of replacing the text by making a clip path out of the text. Yes indeed! We’ll use the SVG <text> inside a <clipPath> element and then use that to clip the entire element that has backdrop-filter on it.
See the Pen
Text with Blurred Background by Chris Coyier (@chriscoyier)
on CodePen.
For some reason (that I think is a bug), Chrome renders that like this:
It’s failing to clip the element properly, even though it supposedly supports both of those properties. I tried using an @supports block, but that’s not helpful here. It looks like Apple’s site has a .no-backdrop-blur class on the <html> element (Modernizr-style) that is set on Chrome to avoid using the effect at all. I just let my demo break. Maybe someday it’ll get that fixed.
It looks right in Safari:
And Firefox doesn’t support backdrop-filter at the moment, so the @supports block does its thing and gives you white text instead.
Thanks for writing this up!
Well, it doesn’t work correctly anywhere except Safari. Ok.
Nice example page here!
Just a quick note – the problem with Chrome is a known bug, which is fixed in Chrome 77, releasing to stable in the next week or so. See https://crbug.com/974857 for more details.
Also, it doesn’t work with overflow-hidden in chrome and ignores combination of border radius with overflow hidden in both safari and chrome.
See: https://codepen.io/jstrst/pen/yLBZYyv
excellent, love it
Regarding the issue from Pixelofficer with overflow-hidden, you’re right – that looks like a bug. I’ve captured it here: https://crbug.com/1009155. I modified your example, but let me know if that’s the problem you were describing.
Yes, that’s it… thanks for submitting :)
Also – Chrome under MacOS is different… Backdrop filter is completly ignored when used in combination with overflow-hidden and therefore – clipping works correctly :)
Perhaps comment on the bug itself… but backdrop-filter should work properly on Chrome under MacOS. There was a masking-related bug in Chrome 76, but as of Chrome 77 things should be fine. I’d be interested to see what you’re referring to there.
sent reply there with screenshot…