CSS backdrop-filter playground

Educational guide to backdrop-filter

How to use CSS backdrop-filter

Understand what gets filtered, prepare a translucent surface, and build a reusable panel. Examples are independent of the playground.

Back to the playground

Mental model

The scene provides the image, the panel sits above it, and the text belongs to the panel. Your choice of property determines which part changes.

Blur affects the panel and its text. The scene image is outside the filtered element.

filter: the whole panel

HTML

<div class="backdrop-guide-filter">
  <div class="backdrop-guide-filter-panel">Panel text</div>
</div>

CSS

.backdrop-guide-filter {
  display: grid;
  place-items: center;
  min-block-size: 14rem;
  padding: 1rem;
  background: url("/assets/images/backdrop-filter-demo.webp") center / cover;

  .backdrop-guide-filter-panel {
    inline-size: min(100%, 24rem);
    padding: 1.5rem;
    box-sizing: border-box;
    background-color: rgb(255 255 255 / 55%);
    color: #111;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
    filter: blur(3px);
  }
}

backdrop-filter: the background seen through the panel

Panel text

Text keeps its shape; the image area seen behind the panel is blurred.

backdrop-filter: the background seen through the panel

HTML

<div class="backdrop-guide-backdrop">
  <div class="backdrop-guide-backdrop-panel">Panel text</div>
</div>

CSS

.backdrop-guide-backdrop {
  display: grid;
  place-items: center;
  min-block-size: 14rem;
  padding: 1rem;
  background: url("/assets/images/backdrop-filter-demo.webp") center / cover;

  .backdrop-guide-backdrop-panel {
    inline-size: min(100%, 24rem);
    padding: 1.5rem;
    box-sizing: border-box;
    background-color: rgb(255 255 255 / 55%);
    color: #111;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
    backdrop-filter: blur(10px) saturate(140%);
  }
}

Transparency and functions

An applied filter can be invisible. Start by checking the background covering it.

The alpha of background-color only makes the background translucent. opacity reduces the opacity of the entire element, including text: they are not interchangeable. The recipe keeps opacity: 1.

The property starts at none and is not inherited. It accepts a space-separated chain, such as blur(10px) saturate(140%); each function receives the previous result. The playground uses a fixed order. Change one function at a time to understand its contribution.

The same scene with an opaque background

Panel text

The white panel covers the filtered image. Increasing blur does not make its background transparent.

The same scene with an opaque background

CSS

.backdrop-guide-opaque {
  display: grid;
  place-items: center;
  min-block-size: 14rem;
  padding: 1rem;
  background: url("/assets/images/backdrop-filter-demo.webp") center / cover;

  .backdrop-guide-opaque-panel {
    inline-size: min(100%, 24rem);
    padding: 1.5rem;
    box-sizing: border-box;
    background-color: #fff;
    color: #111;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
    backdrop-filter: blur(10px) saturate(140%);
  }
}

Practical example

Combine a translucent surface, blur, and saturation without affecting the panel text.

A translucent panel with blur and saturate

Panel text

The 85% white background maintains a light base under dark text. Blur softens image detail and saturation strengthens its colors.

A translucent panel with blur and saturate

HTML

<div class="backdrop-guide-recipe">
  <div class="backdrop-guide-recipe-panel">Panel text</div>
</div>

CSS

.backdrop-guide-recipe {
  display: grid;
  place-items: center;
  min-block-size: 14rem;
  padding: 1rem;
  background: url("/assets/images/backdrop-filter-demo.webp") center / cover;

  .backdrop-guide-recipe-panel {
    inline-size: min(100%, 24rem);
    padding: 1.5rem;
    box-sizing: border-box;
    background-color: rgb(255 255 255 / 85%);
    color: #111;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
    backdrop-filter: blur(10px) saturate(140%);
  }
}

The image is decorative and uses a CSS background. Adapt its path when copying the recipe. Check contrast with your actual images, especially if you reduce alpha; blur alone does not guarantee readability.

Common mistakes

Diagnose the scene before adding more filters.

No detail behind the panel

Expected result: You expect visible blur.
Cause: A uniform background barely changes with blur, or the panel does not overlap the content.
Solution: Try a detailed image and check the position and paint order of the panel.

An ancestor limits composition

Expected result: You expect to filter content behind the entire scene.
Cause: Ancestor effects, such as filter or opacity below 1, can establish a backdrop root boundary.
Solution: Inspect ancestors and test the case in your target browsers. Backdrop root and stacking context are distinct concepts; the Filter Effects 2 draft has not yet reached consensus on this definition.

Text loses contrast

Expected result: You expect readable text over any photo.
Cause: Transparency allows light and dark regions through; blur does not ensure contrast.
Solution: Keep a sufficiently solid base, adjust text color, and check composite contrast with real content.

The effect is too expensive

Expected result: You expect a smooth experience.
Cause: Cost depends on the scene, filtered area, effects, and device.
Solution: Limit the effect to where it adds value. Avoid unnecessary nesting or animation and measure on target devices; there is no universally safe blur radius.

Support and compatibility

Check the Baseline status and browser compatibility of backdrop-filter.

To keep exploring, compare this result with filter: it affects the whole element and its content.

Explore the filter lab