CSS backdrop-filter Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 25 - Views

⏳ 4 mins

💬 1 Comment

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

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

Value	Description
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

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