In 2007 Microsoft released Windows Vista, with it’s new GUI style called Aero Glass. The biggest graphical feature of this was transparent background of window with blurred everything below. It was 12 years ago, and i still think, blurred background looks great.

But creating this effect in webpage wasn’t easy. There was css property filter, but it applies at whole element, and don’t touch what is below. Backdrop-filter can do exactly the same effects, but for everything below our object. Let’s see this difference on screenshots:

But not only blur. You can use this for all filter functions:

• blur
• brightness
• contrast
• grayscale
• hue-rotate
• invert
• opacity
• saturate
• sepia

This feature was earlier in MS Edge and Safari, but now it is also in Chrome 76. Unfortunately, we’re still waiting for firefox to implement this, and implementation in Chrome is sometimes buggy.

Read more:

• https://caniuse.com/#feat=css-backdrop-filter
• https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter