CSS backdrop-filter Property

Definition and Usage

The backdrop-filter property applies graphical effects such as blur or color shift to the area behind an element. The panel’s own text stays sharp while the backdrop softens or changes color.

To see the effect, the element needs a transparent or semi-transparent background, and something must sit behind it. Use it for frosted overlays, sticky bars, and glass cards. To filter the element itself, use filter instead.

CSS Syntax

The initial value is none. Filter functions match filter: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), and drop-shadow(). Chain several with spaces.

Property Values

How to Use backdrop-filter

Put content behind a translucent panel, then filter only what shows through.

1. Place a photo, gradient, or page content behind the overlay.
2. Give the overlay a semi-transparent background, such as background-color: rgb(255 255 255 / 0.3).
3. Set backdrop-filter on that overlay. It is not inherited.
4. Keep text contrast strong so the UI stays readable if blur is missing.

Live Preview

A translucent card sits on a colorful scene. Change backdrop-filter and watch only the area behind the card update.

CSS Examples

Each snippet adds only what backdrop-filter needs: a backdrop, a translucent panel, and a filter. Use Try It Yourself for a live editor.

<style>
  .scene {
    background: linear-gradient(135deg, #2563eb, #db2777);
    padding: 24px;
  }
  .panel {
    background: rgb(255 255 255 / 0.35);
    backdrop-filter: blur(8px);
    padding: 16px;
  }
</style>

<div class="scene">
  <div class="panel">Blurred backdrop</div>
</div>

<style>
  .scene {
    background: linear-gradient(135deg, #0f766e, #1d4ed8);
    padding: 24px;
  }
  .card {
    background: rgb(255 255 255 / 0.15);
    border: 1px solid rgb(255 255 255 / 0.35);
    backdrop-filter: blur(12px) saturate(160%);
    padding: 16px;
    color: #fff;
  }
</style>

<div class="scene">
  <div class="card">Glass card</div>
</div>

<style>
  .scene {
    background: linear-gradient(90deg, #ef4444, #22c55e, #3b82f6);
    padding: 24px;
  }
  .panel {
    background: rgb(255 255 255 / 0.45);
    backdrop-filter: grayscale(100%);
    padding: 16px;
  }
</style>

<div class="scene">
  <div class="panel">Grayscale behind me</div>
</div>

Key Takeaways