CSS | backdrop-filter Property - GeeksforGeeks

CSS | backdrop-filter Property

Last Updated : 7 Nov, 2026

The CSS backdrop-filter property applies graphical effects such as blur, brightness, and color changes to the area behind an element. Unlike filter, it does not apply effects to the element's own content.

  • It is commonly used to create frosted-glass effects and improve text readability over backgrounds.
  • The element's background must be transparent or partially transparent to reveal the filtered backdrop.

Syntax

backdrop-filter: none | filter-function;

Filter Functions

FunctionDescriptionExample
blur()Blurs the backgroundblur(5px)
brightness()Adjusts brightnessbrightness(70%)
contrast()Adjusts contrastcontrast(150%)
drop-shadow()Adds a shadow effectdrop-shadow(4px 4px 6px black)
grayscale()Converts colors to grayscalegrayscale(100%)
hue-rotate()Rotates colors around the color wheelhue-rotate(180deg)
invert()Inverts colorsinvert(100%)
opacity()Adjusts backdrop opacityopacity(50%)
saturate()Adjusts color saturationsaturate(150%)
sepia()Applies a sepia effectsepia(100%)

Example:

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>Backdrop Filter Effects</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #eee;
            padding: 20px;
        }

        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .box {
            width: 160px;
            height: 120px;
            display: grid;
            place-items: center;
            background:
                linear-gradient(45deg, #ff5722, #2196f3, #4caf50);
            border-radius: 10px;
            overflow: hidden;
        }

        .glass {
            width: 100%;
            padding: 15px 0;
            text-align: center;
            color: white;
            background: rgb(255 255 255 / 20%);
        }

        .blur {
            backdrop-filter: blur(5px);
        }

        .brightness {
            backdrop-filter: brightness(40%);
        }

        .contrast {
            backdrop-filter: contrast(200%);
        }

        .grayscale {
            backdrop-filter: grayscale(100%);
        }

        .hue {
            backdrop-filter: hue-rotate(180deg);
        }
    </style>
</head>
<body>

    <h2>Backdrop Filter Effects</h2>

    <div class="container">
        <div class="box">
            <div class="glass blur">Blur</div>
        </div>

        <div class="box">
            <div class="glass brightness">Brightness</div>
        </div>

        <div class="box">
            <div class="glass contrast">Contrast</div>
        </div>

        <div class="box">
            <div class="glass grayscale">Grayscale</div>
        </div>

        <div class="box">
            <div class="glass hue">Hue Rotate</div>
        </div>
    </div>

</body>
</html>

Global Values

ValueDescription
noneNo backdrop effect (default).
initialResets the property to none.
inheritInherits the parent's computed value.
unsetActs as initial because the property is not inherited.
revertReverts the property to the previous cascade origin.
revert-layerReverts the property in the current cascade layer.

Example:

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>Backdrop Filter Effects</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #eee;
            padding: 20px;
        }

        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .box {
            width: 160px;
            height: 120px;
            display: grid;
            place-items: center;
            background:
                linear-gradient(45deg, #ff5722, #2196f3, #4caf50);
            border-radius: 10px;
            overflow: hidden;
        }

        .glass {
            width: 100%;
            padding: 15px 0;
            text-align: center;
            color: white;
            background: rgb(255 255 255 / 20%);
        }

        .shadow {
            backdrop-filter: drop-shadow(4px 4px 5px black);
        }

        .invert {
            backdrop-filter: invert(100%);
        }

        .opacity {
            backdrop-filter: opacity(30%);
        }

        .saturate {
            backdrop-filter: saturate(200%);
        }

        .sepia {
            backdrop-filter: sepia(100%);
        }
    </style>
</head>
<body>

    <h2>Backdrop Filter Effects</h2>

    <div class="container">
        <div class="box">
            <div class="glass shadow">Drop Shadow</div>
        </div>

        <div class="box">
            <div class="glass invert">Invert</div>
        </div>

        <div class="box">
            <div class="glass opacity">Opacity</div>
        </div>

        <div class="box">
            <div class="glass saturate">Saturate</div>
        </div>

        <div class="box">
            <div class="glass sepia">Sepia</div>
        </div>
    </div>

</body>
</html>
Comment

Explore