Open In App

Workaround to backdrop-filter in CSS

Improve
Improve
Like Article
Like
Save
Share
Report

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:




    <!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

    
    

    OUTPUT:
    eg1

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




    <!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
         

    
    

    OUTPUT:
    eg2

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




    <!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

    
    

    OUTPUT:
    eg3

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




    <!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

    
    

    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.




    <!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

    
    

    OUTPUT:
    eg1

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




    <!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

    
    

    OUTPUT:
    eg1

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




    <!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

    
    

    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.




    <!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

    
    

    OUTPUT:
    eg1

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




    <!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

    
    

    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.




    <!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

    
    

    OUTPUT:
    eg1



Last Updated : 15 Sep, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads