The backdrop-filter Property.

The following are a series of image (img) elements, each with a div positioned on top. Each of these divs is styled using a different type of backdrop filter.

A simple blur effect.

backdrop-filter: blur(10px)

The CSS for the above image is: 

-webkit-backdrop-filter: blur(10px);

Inverted color.

backdrop-filter: invert()

The CSS for the above image is: 

-webkit-backdrop-filter: invert();

Multiple filters.

backdrop-filter: sepia() hue-rotate(120deg)

The CSS for the above image is: 

-webkit-backdrop-filter: sepia() hue-rotate(120deg);

Dynamic backdrop.

Dynamic Background

The CSS for the above image is: 

-webkit-backdrop-filter: blur(10px);