BaselineLab

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.

Texto sobre imagen

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