CSS | backdrop-filter Property

18 Nov, 2019
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:<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>      <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: 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>Output:
Example:
<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>      <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: 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>
Output:
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:<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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:
Example:
<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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. The original image is at 100% contrast. If the contrast is below 0%, it will completely black the image.Example:<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>      <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:
Example:
<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>      <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. It accepts the horizontal and vertical shadow amounts along with the spread and color values.Example:<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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:
Example:
<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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.Example:<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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:
Example:
<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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. 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:<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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:
Example:
<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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 and 100% will make the image completely inverted.Example:<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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:
Example:
<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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 and a value of 100% indicates the original image which is completely opaque.Example:<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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:
Example:
<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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. A 0% value would indicate a completely unsaturated image and more than 100% would indicate a super-saturated image.Example:<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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:
Example:
<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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.Example:<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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: 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:
Example:
<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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: 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:
none: It is the default value and does not apply any effect to the image.Example:<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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: 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>Output:
Example:
<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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: 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>
Output:
initial: It is used to set this property to its default value.Example:<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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: 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>Output:
Example:
<!DOCTYPE html><html>  <head>    <title>CSS | backdrop-filter</title>          <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: 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>
Output:
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
CSS-Properties
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array