backdrop-filter

backdrop-filter applies visual effects to pixels behind an element. Its own content is painted afterward. An opaque background hides the effect, so some transparency is needed to see it.

Blur stripes behind sharp text

The stripes belong to the outer stage. Only the area beneath the translucent panel is blurred; the panel’s text stays sharp.

<div class="stage"><p class="panel">Sharp text over softened stripes.</p></div>

.stage {
  padding: 2rem 1rem;
  background: repeating-linear-gradient(
    90deg,
    #2563eb 0 10px,
    #bfdbfe 10px 20px
  );
}
.panel {
  padding: 1rem;
  color: #172554;
  background: rgb(255 255 255 / 85%);
  backdrop-filter: blur(5px);
}

Add the effect only when supported

The default panel has a solid white background. A support query adds a translucent surface and filtering together. Unsupported browsers keep the readable solid panel.

<div class="stage"><p class="panel">A readable fallback comes first.</p></div>

.stage {
  padding: 2rem 1rem;
  background: repeating-linear-gradient(
    45deg,
    #0f766e 0 14px,
    #99f6e4 14px 28px
  );
}
.panel {
  padding: 1rem;
  background: white;
  color: #134e4a;
}
@supports (backdrop-filter: blur(4px)) {
  .panel {
    background: rgb(255 255 255 / 90%);
    backdrop-filter: blur(4px);
  }
}

Values and boundaries

The initial value is none and the property is not inherited. It accepts filter functions such as blur(4px), brightness(.8), and saturate(1.2), as well as an SVG filter URL. Multiple functions apply in order.

The backdrop is limited by the nearest backdrop root, rather than necessarily including the whole page. Ancestors using effects such as opacity below 1, filter, masking, or backdrop-filter can create such a boundary. A non-none backdrop-filter also creates a stacking context.

Common mistakes

This does not blur the panel’s own text; filter would. Blur alone does not guarantee text contrast: test the composite background and use a sufficiently opaque surface. Avoid treating an old Safari version number as unprefixed support; older versions used -webkit-backdrop-filter. Check the linked compatibility table for your target browsers and values.

Learn background-color, opacity, and filter.

Sources and browser support

MDN: backdrop-filter describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.