Think, write, repeat.

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.

– developer.mozilla.org

Have you seen Lovebird‘s top navigation? You will see blur effect 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.

Then 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 2nd semester of 2015. Unfortunately until now, browser 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-filer has some options to manipulate the area behind the element. It’s not only blur option but also you can use brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sephia and saturate. Find some examples related backdrop-filter on Codepen.

Originaly posted in Lieur’s Journal