CSS - backdrop-filter Property

Previous
Quiz
Next

CSS backdrop-filter property is used to add graphical effects to the area behind an element, i.e., to the backdrop of an element. As this property add the effects such as blurring, behind the element, the element needs to be fully or partially transparent for the effect to be visible.

Syntax

backdrop-filter: none | filter | initial | inherit;

Property Values

Value Description
none No filter is applied to the back of an element.Default value.
filter A space-separated list of filter-functions such as blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), sepia(), saturate() or an url to an SVG filter that will be applied to the backdrop
initial This sets the property to its initial value.
inherit This inherits the property from the parent element.

Examples of CSS Backdrop Filter Property

Below are described examples of backdrop-filter property with different values.

Filterless Backdrop

To avoid applying filter to the backdrop of an element, we use the none value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .nofilter-box {
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
            color: white;
        }
    </style>
</head>

<body>
    <h1>CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="nofilter-box">
            <p>backdrop-filter: none</p>
        </div>
    </div>
</body>

</html>

Blurry Backdrop

To apply a blur to the backdrop of an element, we use the blur filter. This is shown in the following example. A blur of 15px has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .blur-box {
            -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
            color: white;
        }
    </style>
</head>

<body>
    <h1> CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="blur-box">
            <p>backdrop-filter: blur(15px)</p>
        </div>
    </div>
</body>

</html>

Brightness of Backdrop

To adjust the brightness of the backdrop of an element, the brightness fiter is used. This is shown in the following example. A brightness of 50% has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .bright-box {
            -webkit-backdrop-filter: brightness(50%);
            backdrop-filter: brightness(50%);
            color: white;
        }
    </style>
</head>

<body>
    <h1> CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="bright-box">
            <p>backdrop-filter: brightness(50%)</p>
        </div>
    </div>
</body>

</html>

Darkness of Backdrop

To adjust the contrast of the backdrop of an element, we use the contrast filter. This is shown in the following example. A contrast of 10% has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .contrast-box {
            -webkit-backdrop-filter: contrast(10%);
            backdrop-filter: contrast(10%);
            color: white;
        }
    </style>
</head>

<body>
    <h1> CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="contrast-box">
            <p>backdrop-filter: contrast(10%)</p>
        </div>
    </div>
</body>

</html>

Grayscale Backdrop

To add grayscale effect to the backdrop of the element, we use the grayscale filter. This is shown in the following example. A 70% grayscale value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .gray-box {
            -webkit-backdrop-filter: grayscale(70%);
            backdrop-filter: grayscale(70%);
            color: white;
        }
    </style>
</head>

<body>
    <h1> CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="gray-box">
            <p>backdrop-filter: grayscale(70%)</p>
        </div>
    </div>
</body>

</html>

Rotating Colors of Backdrop

To add a hue-rotate effect to the backdrop of the element, we use the hue-rotate filter. It changes the color of the backdrop by rotating them around color wheel. The angle specified determines the direction of rotation. This is shown in the following example. An angle of 120 deg has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .hue-box {
            -webkit-backdrop-filter: hue-rotate(120deg);
            backdrop-filter: hue-rotate(120deg);
            color: white;
        }
    </style>
</head>

<body>
    <h1>CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="hue-box">
            <p>backdrop-filter: hue-rotate(120deg)</p>
        </div>
    </div>
</body>

</html>

Inverting Colors of Backdrop

To add the invert effect to the backdrop of the element, we use the invert filter. It inverts the colors of the backdrop and creates a negative effect. This is shown in the following example. A 70% value has been given to invert filter.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .invert-box {
            background-color: rgba(255, 255, 255, 0.4);
            -webkit-backdrop-filter: invert(70%);
            backdrop-filter: invert(70%);
            color: white;
        }
    </style>
</head>

<body>
    <h1>CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="invert-box">
            <p>backdrop-filter: invert(70%)</p>
        </div>
    </div>
</body>

</html>

Transparency of Backdrop

To adjust the transparency effect of the backdrop of the element, we use the opacity filter. This is shown in the following example. A 10% opacity has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .opacity-box {
            -webkit-backdrop-filter: opacity(10%);
            backdrop-filter: opacity(10%);
            color: white;
        }
    </style>
</head>

<body>
    <h1>CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="opacity-box">
            <p>backdrop-filter: opacity(10%)</p>
        </div>
    </div>
</body>

</html>

Warm Backdrop

To add the sepia effect which simulates warm, brownish tint to the background giving an old photograph effect,to the backdrop of the element, we use the sepia filter. This is shown in the following example. A 90% value has been given to sepia filter.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .sepia-box {
            -webkit-backdrop-filter: sepia(90%);
            backdrop-filter: sepia(90%);
            color: white;
        }
    </style>
</head>

<body>
    <h1> CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="sepia-box">
            <p>backdrop-filter: sepia(90%)</p>
        </div>
    </div>
</body>

</html>

Color Intensity of Backdrop

To add the saturation effect which adjusts the intensity of colors to the backdrop of the element, we use the saturation filter. This is shown in the following example. A 180% saturation has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .saturate-box {
            -webkit-backdrop-filter: saturate(180%);
            backdrop-filter: saturate(180%);
            color: white;
        }
    </style>
</head>

<body>
    <h1> CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="saturate-box">
            <p>backdrop-filter: saturate(180%)</p>
        </div>
    </div>
</body>

</html>

Multiple Filter Effect to the Backdrop

We can also use multiple filters at the same time. In the following example blur and grayscale filters have been used. A blur of 2px and a 70% value to grayscale filter have been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .multi-box {
            -webkit-backdrop-filter: blur(2px) grayscale(70%);
            backdrop-filter: blur(2px) grayscale(70%);
            color: white;
        }
    </style>
</head>

<body>
    <h1> CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="multi-box">
            <p>backdrop-filter: blur(2px) grayscale(70%)</p>
        </div>
    </div>
</body>

</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
backdrop-filter 76.0 17.0 70.0 9.0 63.0
css_reference.htm
Print Page
Previous
Next
Advertisements