backdrop-filter CSS property comes to Chrome and Chromium-based browsers! (76+)

Kamil Pawlak — Tue, 02 Jul 2019 22:45:59 +0000

The backdrop-filter CSS property allows you to enable cool graphical effects, such as blurring, to the area behind an element. It's the easiest way to make blurry backgrounds which are more commonly seen in recent web design projects.

However, there was one gimmick: this feature was only supported in Safari, classic Microsoft Edge (that one with EdgeHTML engine, not the preview) and unofficially in Chromium-based browsers by enabling a special flag. Because none of major browsers (I mean Chrome and Firefox) supported this feature, only about 15% of Internet users could see backdrop-filter in action. Plus the beta Chromium rendering of this feature was buggy and slowed down the whole page.

But things have just changed.

According to caniuse.com, the backdrop-filter feature is finally being officially supported in Chrome starting from version 76, which is currently at preview stage. It should become stable in a few weeks. Other Chromium-based browsers, such as Chromium Edge, Opera etc. should introduce it later (or have introduced).

That means after Chrome 76 goes stable, you will be able to use backdrop-filter without worrying that almost nobody won't see it in action - unless your primary target are Firefox users. That browser hasn't implemented this feature in any part yet 😢.

I've tested backdrop-filter on Chromium Edge and it works flawlessy.

After these support changes, here's an example on how to use backdrop-filter in your CSS:

/* For Chrome & Chromium 76+ */
backdrop-filter: blur(10px);
/* For Safari, classic Edge and Chrome/Chromium <=75 */
-webkit-backdrop-filter: blur(10px);

I think that the wider browser adoption of backdrop-filter property will lead to even more stunning website designs, especially those that utilize some kind of background blurring. Developers can use it without worrying that majority of people won't see it live because their browser doesn't support it. Feel free to use it. Happy coding 👨🏻‍💻

DEV Community: Kamil Pawlak

backdrop-filter CSS property comes to Chrome and Chromium-based browsers! (76+)