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.

Presets

Choose a configuration as a starting point, then adjust any control.

BackdropAccording 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

Functionsbackdrop-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.

Text over image

HTML

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

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<div class="grid place-items-center inline-xl block-80 bg-[url(https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80)] bg-center bg-cover bg-no-repeat">
  <div class="inline-1/2 block-32 bg-[rgb(from_#ffffff_r_g_b_/_28%)] backdrop-blur-[10px]"></div>
</div>

CSS

.backdrop-scene {
  display: grid;
  place-items: center;
  inline-size: 36rem;
  block-size: 20rem;
  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 {
  inline-size: 50%;
  block-size: 8rem;
  background-color: rgb(from #ffffff r g b / 28%);
  backdrop-filter: blur(10px);
}

.backdrop-scene {
  display: grid;
  place-items: center;
  inline-size: 36rem;
  block-size: 20rem;
  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 {
    inline-size: 50%;
    block-size: 8rem;
    background-color: rgb(from #ffffff r g b / 28%);
    backdrop-filter: blur(10px);
  }
}