BaselineLab

CSS backdrop-filter playground

Explore backdrop-filter with a background image and a translucent centered panel. Adjust chained filter functions and copy the generated HTML and CSS.

Text over image

HTML
<div class="backdrop-scene">
  <div class="backdrop-panel">
    <p>backdrop-filter</p>
  </div>
</div>
CSS
.backdrop-scene {
  background-image: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.backdrop-panel {
  background-color: rgb(from #ffffff r g b / 28%);
  backdrop-filter: blur(10px);
}