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
Leave a Reply