CSS | backdrop-filter Property

The CSS backdrop-filter property is used to apply effects to the area behind an element. This is unlike the filter property where it applies the effect to the whole element. It can be used to eliminate the use of an extra element to style the background separately.

Syntax:

backdrop-filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | none | initial | inherit



Property Values:

  • blur(): It is used to apply a Gaussian blur to the image. The default value of this function is 0 which applies no blur effect.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS | backdrop-filter</title>
      
        <style>
            .container {
                background-image: url(
                background-size: cover;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
                width: 360px;
            }
            .foreground {
                backdrop-filter: blur(5px);
                padding: 2px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>CSS | backdrop-filter</b>
          
        <div class="container">
            <div class="foreground">
                This text is not affected
                by backdrop-filter.
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    blur

  • brightness(): It is used to make the image lighter or darker. A value over 100% will brighten the image and a value below it will darken the image. If the brightness becomes 0%, it will completely black the image.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS | backdrop-filter</title>
          
        <style>
            .container {
                background-image: url(
                background-size: cover;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
                width: 360px;    
            }
            .foreground {
                backdrop-filter: brightness(25%);
                padding: 2px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>CSS | backdrop-filter</b>
          
        <div class="container">
            <div class="foreground">
                This text is not affected
                by backdrop-filter.
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    brightness

  • contrast(): It is used to set the contrast of the image. The original image is at 100% contrast. If the contrast is below 0%, it will completely black the image.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS | backdrop-filter</title>
      
        <style>
            .container {
                background-image: url(
                background-size: cover;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
                width: 360px;    
            }
            .foreground {
                backdrop-filter: contrast(20%);
                padding: 2px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>CSS | backdrop-filter</b>
          
        <div class="container">
            <div class="foreground">
                This text is not affected by
                backdrop-filter.
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    contrast

  • drop-shadow(): It is used to apply a drop shadow effect to the element. It accepts the horizontal and vertical shadow amounts along with the spread and color values.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS | backdrop-filter</title>
          
        <style>
            .container {
                background-image: url(
                background-size: cover;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
                width: 360px;    
            }
            .foreground {
                backdrop-filter: drop-shadow(20px 10px red);
                padding: 2px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>CSS | backdrop-filter</b>
          
        <div class="container">
            <div class="foreground">
                This text is not affected by
                backdrop-filter.
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    drop-shadow

  • grayscale(): It is used to convert the colors of the image into black and white. A value of 0% indicates the original image and 100% will indicate a completely black and white image.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS | backdrop-filter</title>
          
        <style>
            .container {
                background-image: url(
                background-size: cover;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
                width: 360px;    
            }
            .foreground {
                backdrop-filter: grayscale(75%);
                padding: 2px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>CSS | backdrop-filter</b>
          
        <div class="container">
            <div class="foreground">
                This text is not affected by
                backdrop-filter.
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    grayscale

  • hue-rotate(): It is used to apply a hue rotation to the image. The function value denotes the number of degrees around the color circle that the image circle would be adjusted. The default value is 0 which represents the original image.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS | backdrop-filter</title>
          
        <style>
            .container {
                background-image: url(
                background-size: cover;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
                width: 360px;    
            }
            .foreground {
                backdrop-filter: hue-rotate(180deg);
                padding: 2px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>CSS | backdrop-filter</b>
          
        <div class="container">
            <div class="foreground">
                This text is not affected by
                backdrop-filter.
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    hue-rotate

  • invert(): It is used to invert the image. The default value is 0% which represents the original image and 100% will make the image completely inverted.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS | backdrop-filter</title>
          
        <style>
            .container {
                background-image: url(
                background-size: cover;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
                width: 360px;    
            }
            .foreground {
                backdrop-filter: invert(100%);
                padding: 2px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>CSS | backdrop-filter</b>
          
        <div class="container">
            <div class="foreground">
                This text is not affected by
                backdrop-filter.
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    invert

  • opacity(): It is used to set the opacity of the image. The default value is 0% which indicates that the image is completely transparent and a value of 100% indicates the original image which is completely opaque.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS | backdrop-filter</title>
          
        <style>
            .container {
                background-image: url(
                background-size: cover;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
                width: 360px;    
            }
            .foreground {
                backdrop-filter: opacity(50%);
                padding: 2px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>CSS | backdrop-filter</b>
          
        <div class="container">
            <div class="foreground">
                This text is not affected by
                backdrop-filter.
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    opacity

  • saturate(): It is used to set the saturation of the element. The default value is 100% which indicates the original image. A 0% value would indicate a completely unsaturated image and more than 100% would indicate a super-saturated image.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS | backdrop-filter</title>
          
        <style>
            .container {
                background-image: url(
                background-size: cover;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
                width: 360px;    
            }
            .foreground {
                backdrop-filter: saturate(50%);
                padding: 2px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>CSS | backdrop-filter</b>
          
        <div class="container">
            <div class="foreground">
                This text is not affected by
                backdrop-filter.
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    saturate

  • sepia(): It is used to convert the image to sepia giving it a warmer appearance. A 0% value represents the original image and 100% represents a completely sepia image.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS | backdrop-filter</title>
          
        <style>
            .container {
                background-image: url(
                background-size: cover;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
                width: 360px;    
            }
            .foreground {
                backdrop-filter: sepia(100%);
                padding: 2px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
      
        <b>CSS | backdrop-filter</b>
      
        <div class="container">
            <div class="foreground">
                This text is not affected by
                backdrop-filter.
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    sepia

  • none: It is the default value and does not apply any effect to the image.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS | backdrop-filter</title>
          
        <style>
            .container {
                background-image: url(
                background-size: cover;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
                width: 360px;    
            }
            .foreground {
                backdrop-filter: none;
                padding: 2px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>CSS | backdrop-filter</b>
          
        <div class="container">
            <div class="foreground">
                This text is not affected by
                backdrop-filter.
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    none

  • initial: It is used to set this property to its default value.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS | backdrop-filter</title>
          
        <style>
            .container {
                background-image: url(
                background-size: cover;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
                width: 360px;    
            }
            .foreground {
                backdrop-filter: initial;
                padding: 2px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>CSS | backdrop-filter</b>
          
        <div class="container">
            <div class="foreground">
                This text is not affected by
                backdrop-filter.
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    initial

  • inherit: It inherits the property from its parent element.

Supported Browsers: The browsers supported by backdrop-filter property are listed below:

  • Google Chrome 76.0
  • Edge 17.0
  • Safari 9.0
  • Opera 34.0


My Personal Notes arrow_drop_up

Im listening

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.