Playground de backdrop-filter en CSS

Explora backdrop-filter con una imagen de fondo y un panel central semitransparente. Ajusta funciones de filtro encadenadas y copia el HTML y CSS generado.

Presets

Elige una configuración como punto de partida y ajusta después cualquier control.

BackdropSegún MDN, backdrop-filter aplica efectos gráficos al área que queda detrás de un elemento. Para que el efecto se vea, el elemento o su fondo debe ser transparente o semitransparente.

URL de la imagen

Color del panel

Funcionesbackdrop-filter acepta none o una lista de funciones de filtro separadas por espacios. El efecto se aplica a los píxeles pintados detrás del elemento, no al contenido del elemento.

Texto sobre imagen

HTML

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

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

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