Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • CSS Tutorial
  • CSS Exercises
  • CSS Interview Questions
  • CSS Selectors
  • CSS Properties
  • CSS Functions
  • CSS Examples
  • CSS Cheat Sheet
  • CSS Templates
  • CSS Frameworks
  • Bootstrap
  • Tailwind
  • CSS Formatter
Open In App
Next Article:
Tailwind CSS Backdrop Filter
Next article icon

CSS | backdrop-filter Property

Last Updated : 23 Aug, 2022
Comments
Improve
Suggest changes
Like Article
Like
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:

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: 

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

 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: 

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

 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: 

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

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: 

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

 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: 

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

 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: 

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

 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: 

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

 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: 

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

 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: 

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

 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: 

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

 sepia

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

Example: 

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

 none

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

Example: 

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

 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 and above
  • Edge 17.0 and above
  • Firefox 103.0 and above
  • Safari 9.0 and above
  • Opera 63.0 and above

Next Article
Tailwind CSS Backdrop Filter
author
sayantanm19
Improve
Article Tags :
  • Web Technologies
  • CSS
  • CSS-Properties

Similar Reads

  • CSS Filter Property
    The filter property in CSS is used to apply visual effects to elements, most commonly images. It is particularly useful for adjusting rendering effects such as background, border, and other visual components of the element. Try It: .item { border: 1px solid gray; font-family: "Gill Sans", "Gill Sans
    6 min read
  • CSS background-image Property
    The background-image property allows you to set one or more background images for an element. It allows you to specify the image URL and combine it with other background properties to control its position, size, repeat behavior, and more, enhancing the visual design of web pages. Syntaxelement_selec
    4 min read
  • Tailwind CSS Backdrop Filter
    Tailwind CSS backdrop filter is used to enable the backdrop of any filter which is used by the filter. It works like the filter class but in opposites direction. In filter class, we have seen that, if we want to use any effect on any element like blur, contrast, brightness, etc then we have to use a
    1 min read
  • CSS cross-fade Property
    The cross-fade property is used to form a kind of blend between two given images. In simple words, it is used to mix to images into one another in terms of percentage. Syntax: cross-fade( <image, <image>, <percentage> ) Property value: It has no property values, instead, it takes two
    2 min read
  • CSS | border-inline Property
    The border-inline property in CSS is used to set the individual logical block inline border property values in a single place in the style sheet. It sets the inline border-top(left) and bottom(right) of the defining element. Syntax: border-inline: border-width| border-style| border-color; Property v
    2 min read
  • CSS background-position Property
    The CSS background-position property sets the starting position of a background image within an element. It allows you to use keywords, percentages, or length values to control where the image is placed. This property helps customize the visual layout by precisely aligning background images, enhanci
    7 min read
  • CSS border-left Property
    The border-left property in CSS is used to set all bottom left properties in one line. It is used to set the width, style, and color of the left border.Syntax: border-left: border-width border-style border-color|initial|inherit; border-left is a shorthand to set the below property values.Property Va
    2 min read
  • CSS border-image Property
    The border-image property in CSS is used to set the border of an element.  Syntax: border-image: source slice width outset repeat|initial|inherit;The border-image property is the combination of many properties which are listed below: border-image-sourceborder-image-sliceborder-image-widthborder-imag
    3 min read
  • CSS background-origin property
    The background-origin property in CSS is your key to managing the background image of a webpage. It sets the origin point of the image in the background, with the default setting placing the background image origin at the upper-left corner of the screen/webpage. Syntax:  background-origin: padding-b
    5 min read
  • CSS background-clip Property
    The background-clip property in CSS controls how a background (color or image) extends within an element, allowing you to dictate the reach of your background. Syntax: background-clip: border-box | padding-box | content-box | text | initial | inherit;Property value:  border-box: The border-box prope
    3 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences