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