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.

Backdrop

According to MDN, backdrop-filter applies graphical effects to the area behind an element. To make the effect visible, the element or its background must be transparent or partially transparent.

Image URL

Panel color

Functions

backdrop-filter accepts none or a space-separated list of filter functions. The effect applies to pixels painted behind the element, not to the element content.

blur()

brightness()

contrast()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

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);
}