CssHow-ToBeginner · 3 min read

How to Use Backdrop-Filter in CSS: Syntax and Examples

Use the backdrop-filter CSS property to apply visual effects such as blur or brightness to the area behind an element. It works by adding filters like blur() or brightness() that affect the background visible through the element's transparent parts.

📐

Syntax

The backdrop-filter property accepts one or more filter functions separated by spaces. Common filters include blur(), brightness(), contrast(), and grayscale(). You can combine multiple filters for different effects.

Example filters:

blur(5px) - blurs the background by 5 pixels
brightness(0.8) - makes the background 80% as bright

css

backdrop-filter: blur(5px);
backdrop-filter: brightness(0.8) contrast(120%);

💻

Example

This example shows a semi-transparent box with a blurred background behind it using backdrop-filter. The background image stays sharp except behind the box, where it looks blurred.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Backdrop-filter Example</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    background: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80') no-repeat center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .blur-box {
    background: rgba(255, 255, 255, 0.3);
    padding: 2rem 3rem;
    border-radius: 1rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* for Safari */
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 1.25rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }
</style>
</head>
<body>
  <div class="blur-box">This box blurs the background behind it.</div>
</body>
</html>

Output

A webpage with a full-screen background photo and a centered translucent white box that blurs the background behind it, making the photo appear soft inside the box area.

⚠️

Common Pitfalls

Many beginners forget that backdrop-filter only works if the element has some transparency, like a semi-transparent background color or transparent areas. If the element is fully opaque, the effect won't show.

Also, some browsers require the -webkit-backdrop-filter prefix for support, especially Safari.

Another common mistake is expecting backdrop-filter to affect the element itself instead of the background behind it.

css

/* Wrong: fully opaque background hides effect */
.blur-box {
  background: white; /* no transparency */
  backdrop-filter: blur(8px);
}

/* Right: add transparency to see effect */
.blur-box {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
}

📊

Quick Reference

Backdrop-filter Cheat Sheet:

Filter Function	Description	Example
blur()	Blurs the background behind the element	blur(5px)
brightness()	Adjusts brightness of the background	brightness(0.7)
contrast()	Changes contrast of the background	contrast(150%)
grayscale()	Converts background to grayscale	grayscale(100%)
sepia()	Applies sepia tone to background	sepia(60%)
saturate()	Increases or decreases color saturation	saturate(200%)
opacity()	Changes background transparency	opacity(0.5)

✅

Key Takeaways

Use backdrop-filter to apply visual effects like blur to the background behind an element.

Ensure the element has some transparency to see the backdrop-filter effect.

Include the -webkit-backdrop-filter prefix for better browser support, especially Safari.

Combine multiple filter functions for creative background effects.

Backdrop-filter affects the background behind the element, not the element's own content.