Building iOS-like transparency effects in CSS with backdrop-filter

Today, thanks to a Vine video Jason shared in our front-end Slack channel, I learned about the -webkit-backdrop-filter property, which landed very recently in the WebKit Nightlies. Like the existing -webkit-filter property, it allows you to apply effects such as blur, grayscale, hue-rotate, and others, only instead of applying them to the element itself, they’re applied to whatever is behind the element. This lets you to do some very iOS-like transparency effects, like what I did to The Verge’s nav dropdown while experimenting with this:

In this example, I gave the dropdown background a semi-transparent color, and added a simple -webkit-backdrop-filter: blur(10px); to it. Instead of blurring the dropdown itself, it blurs whatever the dropdown covers when it’s open, giving it a little more depth by letting the blurred, colorful hero images show through.

You can see the effect in action in the following pen, although you’ll need to download and install the WebKit Nightly build to check it out.

See the Pen PwRPZa by Guillermo Esteves (@gesteves) on CodePen.

Evidently, as this just landed very recently in the nightlies, it’ll be a while before this has enough browser support to let us use it in production, but it’s cool nonetheless.