The backdrop-filter will (hopefully) become mainstream in the near future. Here's why I am excited about it.

CSS backdrop filters

Dan Mindru

There are many new CSS features to get excited about (awesome list here?). Tons of selectors & structural properties that I can’t wait to see implemented in all browsers.

Side note: OMG CSS grid 😱, amirite? Did you even see this:

Here is was the CSS behind that looks like:

— Wes Bos (@wesbos) September 19, 2016

However, I’m the kind of person that gets excited about the small things, backdrop-filter included. As humble as it seems, it can enable a ton of design stunts for those that can wield it.

What you can do with backdrop-filter

For centuries, designers and developers have been trying to figure out how to adjust text color when placed on top of a background. If the background is light, the text has to be dark and vice-versa.
Similar to centering elements before flexbox, many gave up and looked into other professions. Others hacked their way out of it with cheap tricks, such as text-shadow / box-shadow (I’m looking at you, Facebook!).

It doesn’t have to be that way. Here’s what we can achieve with backdrop-filter: inverse(1):

Backdrop filter trick

Contrary to other solutions, this one is independent from the text itself. It’s also flexible IMO & it can be used for other use cases too.
There’s a small trick to it. To apply the inverse filter only on the text and prevent messing with the background, the background can be inverted again (filter can be used for that). Here’s what I mean:

/* has to have z-index > 'before' & < 'after' */
p { /* ... */ }

/* the background, has to have z-index < 'p' */
  background-color: green;
  filter: invert(1);
  /* ... */

/* has to have z-index > 'p' */
  backdrop-filter: invert(1);
  /* ... */

The full code for it is available below.

See the Pen CSS filter to invert text color by Dan Mindru (@danmindru) on CodePen.

Unless you are on Safari 9+, you’ll see the inverted background (pink) and nothing else.
Browser support is limited at the moment.
Update: you can also make it work in the current Chrome build by enabling the 'Experimental Web Platform features Mac, Windows, Linux, Chrome OS, Android' flag.

But that’s not all! Like filter, we can use a bunch of effects, such as brightness, contrast, grayscale, hue-rotate (awesome!), saturate and more.
So many possibilities, so little time! What will you build?

Cool stuff you can do with it (suggested by the community, yay!)

Got a cool use case for backdrop-filter? Drop us a line and we’ll include it here!

Night mode

Night mode

Proof of concept: yes sir!
Thanks for the suggestion @bkinney

Frosted glass effect

Frosted glass effect

Proof of concept: sure!
(Due to popular demand)

Why does it exist

But wait, we already have filter? What’s the difference?
Simply put, filter applies a certain (duh) filter on an element. On the other hand, backdrop-filter applies the effect to the layers (elements) underneath it.

Don’t confuse setting opacity < 1 to an element that has a filter with applying that filter to the elements underneath it. It’s completely different.

The origin of backdrop-filter is tied to Apple’s frosted glass design on iOS (and macOS). It’s fairly popular these days, with many devs trying to reproduce it one way or another. In recent Webkit builds, creating the frosted glass effect is as easy as:

Apple backdrop filter If you want to read more about it there’s plenty of info in this blog post.

Why I don’t care about the frost effect

It’s just a trend. It’s going to disappear when the next trend comes out… use it with caution if you have to (damn, I should remove it from

Wrap up

Convincing browsers vendors to implement this experimental feature won’t be easy. As we all know, the best way to do it is with a good song. Here it goes:

When the browser pimp’s in the crib ma
(Back)drop it like it’s hot
(Back)drop it like it’s hot
I got the rolly on my DOM and I’m pouring Chandon
And I roll the best stylesheet cause I got it going on