Dramatic background special effects

backdrop-filter

Shift or invert the hue, saturation, brightness or contrast of everything behind an element, or adjust its grayscale, sepia tone, opacity or drop-shadow.

Property values

One or more of these values. When applying more than one filter to an element, separate them with whitespace.

function	units	effect
blur()	length	The background is blurred using the specified pixel or percentage value.
brightness()	percentage	The background's brightness is reduced the given percentage.
contrast()	percentage	The background's contrast is reduced the given percentage.
saturate()	percentage	The background's color saturation is reduced the given percentage.
hue-rotate()	angle	The background's hue is shifted around the color wheel the given angle.
sepia()	percentage	The background's color is shifted towards sepia-tone by the given percentage.
invert()	percentage	The background's color is reversed by the given percentage.
grayscale()	percentage	The background's color is grayed by the given percentage.
opacity()	percentage	The background's transparency is increased by the given percentage.
drop-shadow()	x, y, radius, color	The background under the element's text is blurred using the same rules used by the text-shadow property.

Examples

To be effective, the element having the backdrop-filter must be nested within an element that has some type of background.

In this example, the text element stays crisp, while its container is affected.

div #container ^background-image:url(/img/fancy.png) {
    p #text {
        Sample text
    }        
}

backdrop-filter HTML

/* blurring the background */
#text {
    backdrop-filter: blur(4px);
}

/* reducing the background's opacity */
#text {
    backdrop-filter: opacity(15%);
}

/* applying a drop-shadow effect to the background under the text */            
#text {
    backdrop-filter: drop-shadow(4px 4px 10px white);
}

backdrop-filter CSS