Backdrop-filter has shipped for Chrome 76!

Ladies and gentlemen!

The long-awaited “backdrop-filter” effect has finally shipped!

Basically it’s that blurring effect you see on iOS. It’s worked with Safari for ages, but now it’s available for Chrome! Don’t expect it to work in other browsers any time soon.

Here’s the official rundown:

To implement it into your project, simply add this to your head code:

.blur {backdrop-filter: blur(4px);}

Then anything you add the combo class “blur” to will have it applied.

Here’s an example: https://aaronssandbox.webflow.io (scroll down)

5 Likes