backdrop-filterproperty 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.
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 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.