CSS backdrop-filter Property

What You’ll Learn

The backdrop-filter property applies visual effects to the area behind an element. It is widely used for frosted glass panels, modal overlays, navigation bars, and modern glassmorphism UI.

Definition and Usage

The backdrop-filter CSS property lets you apply filter effects to the backdrop of an element. Unlike filter, which changes the element itself, backdrop-filter changes only the pixels that show through the element from behind it.

This makes it ideal for overlays, cards, and panels that sit on top of photos, gradients, or page content. A common pattern is a semi-transparent background plus backdrop-filter: blur(8px); to create a soft frosted-glass look.

📝 Syntax

Write backdrop-filter with one or more filter functions, or the keyword none:

selector {
  backdrop-filter: <filter-function> | none;
}

Basic Example

.overlay {
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
}

Supported Filter Functions

• blur() — softens the backdrop with a Gaussian blur
• brightness() — makes the backdrop lighter or darker
• contrast() — increases or reduces backdrop contrast
• grayscale() — removes color from the backdrop
• hue-rotate() — shifts backdrop colors around the color wheel
• invert(), opacity(), saturate(), and sepia()

Syntax Rules

• You can combine multiple functions in one declaration, separated by spaces.
• The syntax mirrors the filter property, but the target is the backdrop instead of the element.
• Use a semi-transparent background so the filtered backdrop remains visible.
• The initial value is none, which applies no backdrop effect.
• Heavy blur values can affect performance on large areas, so use them thoughtfully.

Default Value

The initial value of backdrop-filter is none. That means no visual effect is applied to the backdrop until you add a filter function such as blur() or brightness().

💎 Property Values

These are the most common backdrop-filter values you will use in real projects.

When backdrop-filter Works Best

For beginners, these conditions make the effect easiest to see and most reliable:

• Transparent or translucent background — Use rgba, hsla, or partial opacity so the backdrop can show through.
• Visible content behind the element — Photos, gradients, text, or patterns give the filter something to affect.
• Overlay-style UI — Modals, sticky headers, cards, and pop-ups are common use cases.
• Fallback design — Keep text readable even if the blur effect is unsupported.

backdrop-filter vs filter

Examples Gallery

Try backdrop-filter with blur overlays, glass cards, grayscale panels, and combined filter stacks.

<style>
  .overlay {
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    padding: 20px;
  }
</style>

<div class="overlay">
  <h1>Blurred Background</h1>
  <p>The background behind this overlay is blurred.</p>
</div>

.glass-card {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(160%);
}

.panel {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: grayscale(100%);
}

.modal {
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(10px) brightness(110%) contrast(120%);
}

💡 Best Practices