A Glassy (and Classy) Text Effect

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:

1. backdrop-filter
2. clip-path

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 inside a 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 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.

The post A Glassy (and Classy) Text Effect appeared first on CSS-Tricks.