Workaround to backdrop-filter in CSS - GeeksforGeeks

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:
blur() – It is used to apply a Gaussian blur to the image.Example:<!DOCTYPE html> <html>   <head>     <style>         .container {             background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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: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( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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: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( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:drop-shadow() – It is used to apply a drop shadow effect to the element.<!DOCTYPE html> <html>   <head>          <style>         .container {             background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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: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( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:hue-rotate() – It is used to apply a hue rotation to the image.<!DOCTYPE html> <html>   <head>           <style>         .container {             background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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: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( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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: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( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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: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( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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: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( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
blur() – It is used to apply a Gaussian blur to the image.Example:<!DOCTYPE html> <html>   <head>     <style>         .container {             background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
<!DOCTYPE html> <html>   <head>     <style>         .container {             background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
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( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
<!DOCTYPE html> <html>   <head>       <style>         .container {             background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
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( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
<!DOCTYPE html> <html>   <head>     <style>         .container {             background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
drop-shadow() – It is used to apply a drop shadow effect to the element.<!DOCTYPE html> <html>   <head>          <style>         .container {             background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
<!DOCTYPE html> <html>   <head>          <style>         .container {             background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
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( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
<!DOCTYPE html> <html>   <head>           <style>         .container {             background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
hue-rotate() – It is used to apply a hue rotation to the image.<!DOCTYPE html> <html>   <head>           <style>         .container {             background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
<!DOCTYPE html> <html>   <head>           <style>         .container {             background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
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( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
<!DOCTYPE html> <html>   <head>          <style>         .container {             background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
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( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
<!DOCTYPE html> <html>   <head>           <style>         .container {             background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
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( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
<!DOCTYPE html> <html>   <head>           <style>         .container {             background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
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( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
<!DOCTYPE html> <html>   <head>           <style>         .container {             background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png");             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:
CSS-Misc
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript