Related Articles

Related Articles

Workaround to backdrop-filter in CSS
  • Last Updated : 15 Sep, 2020

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:

.element {
  backdrop-filter: filter-function | none
}

Approach:
Creating overlays on top of images (and videos) often entails using some sort of drop shadow effect. For example, using white icons requires a shadow to be visible against near-white backgrounds. With backdrop-filter, you can create overlays that adapt to the background color instead of using a shadow.

There can be many filter functions:

  1. blur() – It is used to apply a Gaussian blur to the image.
    Example:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <style
            .container { 
                background-image: url( 
                background-size: cover;  
                align-items: center; 
                justify-content: center; 
                height: 100px; 
                width: 250px; 
            
            .foreground { 
                backdrop-filter: blur(2px); 
                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:
    eg1

  2. brightness(): It is used to make the image lighter or darker (0% – darker and 100% – brighter ).
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
      
        <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:
    eg2

  3. contrast() – It is used to set the contrast of the image (100% – original and 0% darker)
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <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:
    eg3

  4. drop-shadow() – It is used to apply a drop shadow effect to the element.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head>
          
        <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:
    eg3

  5. 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
          
        <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:
    eg1

  6. hue-rotate() – It is used to apply a hue rotation to the image.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
          
        <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:
    eg1

  7. invert() – It is used to invert the image. The default value is 0% which represents the original image.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head>
          
        <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:
    eg1

  8. opacity() – It is used to set the opacity of the image. The default value is 0% which indicates that the image is completely transparent.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
          
        <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:
    eg1

  9. saturate() – It is used to set the saturation of the element. The default value is 100% which indicates the original image.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
          
        <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:
    eg1

  10. 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
          
        <style
            .container { 
                background-image: url( 
                background-size: cover; 
                display: flex; 
                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:
    eg1




My Personal Notes arrow_drop_up
Recommended Articles
Page :