Backdrop-filter, the New Way to Create Blur Background

Lovebird's top navigation
Lovebird’s top navigation

The backdrop-filter property provides for effects like blurring or color shifting the area behind an element, which can then be seen through that element by adjusting the element’s transparency/opacity.

Have you seen Lovebird‘s top navigation? You will see blur effect applied to the area behind it. It’s cool, right? The blur effect is introduced by iOS 7 and OS X Yosemite. Even Sketch also put it into its style panel.

Sketch – background blur

We can create that effect by using just 3-4 lines CSS, or even 1 line CSS (if we use mixins). Webkit introduced backdrop-filter in second semester of 2015. Unfortunately, up until now, the only browsers that support backdrop-filter are Safari 9+ and iOS 9.2+ (see the table). We have to wait until CSS Working Group finish working on it. Or, you can do it with Javascript hack. You choose. 🙂

Anyway, backdrop-filter has some options to manipulate the area behind the element. It’s not only blur option, you can also play around with brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sephia and saturate. Find some examples related with backdrop-filter on Codepen.