Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS backdrop-filter Property

Posted in CSS Tutorial
Updated on Oct 01, 2024
By Mari Selvan
👁️ 20 - Views
⏳ 4 mins
💬 1 Comment
CSS backdrop-filter Property

Photo Credit to CodeToFun

🙋 Introduction

The backdrop-filter property in CSS allows web developers to apply graphical effects such as blurring or color shifting to the area behind an element.

This property is particularly useful for creating visually appealing overlays, pop-ups, or any element where you want to enhance the background's appearance without affecting the content in front of it.

💡 Syntax

The backdrop-filter property is applied to an element to define the visual effects that should be applied to the backdrop of that element. The syntax is similar to the filter property but affects the area behind the element.

Syntax
Copied
Copy To Clipboard
element {
  backdrop-filter: effect;
}

Here, effect can be one or more of the following filter functions:

  • blur()
  • brightness()
  • contrast()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()

🎛️ Default Value

The default value of the backdrop-filter property is none, meaning no effect is applied to the backdrop.

🏠 Property Values

ValueDescription
blur(px)Applies a Gaussian blur to the backdrop. The value defines the blur radius.
brightness(%)Adjusts the brightness of the backdrop. A value of 0% will make it completely black, while 100% leaves it unchanged.
contrast(%)Adjusts the contrast of the backdrop. A value of 0% will make it completely gray, while 100% leaves it unchanged.
grayscale(%)Converts the backdrop to grayscale. A value of 100% is completely grayscale.
hue-rotate(deg)Applies a hue rotation to the backdrop.
invert(%)Inverts the colors of the backdrop. A value of 100% completely inverts the colors.
opacity(%)Sets the opacity level for the backdrop.
saturate(%)Saturates the backdrop colors. A value of 100% leaves it unchanged, while values over 100% increase saturation.
sepia(%)Converts the backdrop to sepia tones.

📄 Example

In this example, we'll apply a blur effect to the backdrop of a semi-transparent overlay.

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS backdrop-filter Example</title>
  <style>
    .overlay {
      background-color: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(5px);
      padding: 20px;
      text-align: center;
    }
    body {
      background-image: url('https://via.placeholder.com/800');
      background-size: cover;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div class="overlay">
    <h1>Blurred Background</h1>
    <p>The background behind this overlay is blurred.</p>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The backdrop-filter property is supported in most modern browsers, including the latest versions of Chrome, Safari, and Edge. However, it may not be fully supported in Firefox or older versions of other browsers. It's advisable to check compatibility and provide fallback designs where necessary.

🎉 Conclusion

The backdrop-filter property is a powerful CSS tool that allows you to create stunning visual effects with minimal effort.

Whether you're looking to add depth to your designs with blurs or create dynamic visual effects, this property offers a wide range of possibilities. Experiment with different filter combinations to achieve the desired look and feel for your website.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy