Playground de backdrop-filter en CSS

Guía educativa de backdrop-filter

Cómo usar backdrop-filter en CSS

Entiende qué se filtra, prepara una superficie translúcida y construye un panel reutilizable. Los ejemplos son independientes del playground.

Volver al playground

Modelo mental

La escena aporta la imagen, el panel se coloca encima y el texto pertenece al panel. La elección de propiedad decide qué parte cambia.

El desenfoque afecta al panel y a su texto. La imagen de la escena queda fuera del elemento filtrado.

filter: el panel completo

HTML

<div class="backdrop-guide-filter">
  <div class="backdrop-guide-filter-panel">Texto del panel</div>
</div>

CSS

.backdrop-guide-filter {
  display: grid;
  place-items: center;
  min-block-size: 14rem;
  padding: 1rem;
  background: url("/assets/images/backdrop-filter-demo.webp") center / cover;

  .backdrop-guide-filter-panel {
    inline-size: min(100%, 24rem);
    padding: 1.5rem;
    box-sizing: border-box;
    background-color: rgb(255 255 255 / 55%);
    color: #111;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
    filter: blur(3px);
  }
}

backdrop-filter: el fondo visto a través del panel

Texto del panel

El texto mantiene su forma; se desenfoca la parte de la imagen que se ve detrás del panel.

backdrop-filter: el fondo visto a través del panel

HTML

<div class="backdrop-guide-backdrop">
  <div class="backdrop-guide-backdrop-panel">Texto del panel</div>
</div>

CSS

.backdrop-guide-backdrop {
  display: grid;
  place-items: center;
  min-block-size: 14rem;
  padding: 1rem;
  background: url("/assets/images/backdrop-filter-demo.webp") center / cover;

  .backdrop-guide-backdrop-panel {
    inline-size: min(100%, 24rem);
    padding: 1.5rem;
    box-sizing: border-box;
    background-color: rgb(255 255 255 / 55%);
    color: #111;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
    backdrop-filter: blur(10px) saturate(140%);
  }
}

Transparencia y funciones

Un filtro puede estar aplicado y resultar invisible. Empieza por comprobar el fondo que lo cubre.

El alfa del background-color solo hace translúcido el fondo. opacity reduce la opacidad del elemento completo, incluido el texto: no son intercambiables. La receta mantiene opacity: 1.

La propiedad parte de none y no se hereda. Acepta una cadena separada por espacios, como blur(10px) saturate(140%); cada función recibe el resultado de la anterior. El playground usa un orden fijo. Cambia una función cada vez para entender su contribución.

La misma escena con fondo opaco

Texto del panel

El panel blanco tapa la imagen filtrada. Aumentar el blur no hace transparente su fondo.

La misma escena con fondo opaco

CSS

.backdrop-guide-opaque {
  display: grid;
  place-items: center;
  min-block-size: 14rem;
  padding: 1rem;
  background: url("/assets/images/backdrop-filter-demo.webp") center / cover;

  .backdrop-guide-opaque-panel {
    inline-size: min(100%, 24rem);
    padding: 1.5rem;
    box-sizing: border-box;
    background-color: #fff;
    color: #111;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
    backdrop-filter: blur(10px) saturate(140%);
  }
}

Ejemplo práctico

Combina una superficie translúcida, desenfoque y saturación sin afectar al texto del panel.

Un panel translúcido con blur y saturate

Texto del panel

El fondo blanco al 85% conserva una base clara bajo el texto oscuro. El desenfoque suaviza el detalle de la imagen y la saturación refuerza sus colores.

Un panel translúcido con blur y saturate

HTML

<div class="backdrop-guide-recipe">
  <div class="backdrop-guide-recipe-panel">Texto del panel</div>
</div>

CSS

.backdrop-guide-recipe {
  display: grid;
  place-items: center;
  min-block-size: 14rem;
  padding: 1rem;
  background: url("/assets/images/backdrop-filter-demo.webp") center / cover;

  .backdrop-guide-recipe-panel {
    inline-size: min(100%, 24rem);
    padding: 1.5rem;
    box-sizing: border-box;
    background-color: rgb(255 255 255 / 85%);
    color: #111;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
    backdrop-filter: blur(10px) saturate(140%);
  }
}

La imagen es decorativa y se usa como fondo CSS. Adapta su ruta al copiar la receta. Comprueba el contraste con tus imágenes reales, especialmente si reduces el alfa; el blur por sí solo no garantiza legibilidad.

Errores frecuentes

Diagnostica la escena antes de añadir más filtros.

No hay detalle detrás

Resultado esperado: Esperas ver desenfoque.
Causa: Un fondo uniforme apenas cambia con blur, o el panel no se superpone al contenido.
Solución: Prueba una imagen con detalle y revisa la posición y el orden de pintado del panel.

Un ancestro limita la composición

Resultado esperado: Esperas filtrar contenido situado detrás de toda la escena.
Causa: Efectos en ancestros, como filter u opacity menor que 1, pueden delimitar el backdrop root.
Solución: Revisa la cadena de ancestros y prueba el caso en tus navegadores objetivo. Backdrop root y stacking context son conceptos distintos; el borrador de Filter Effects 2 aún no tiene consenso sobre esta definición.

El texto pierde contraste

Resultado esperado: Esperas poder leer sobre cualquier foto.
Causa: La transparencia deja pasar zonas claras y oscuras; el desenfoque no asegura contraste.
Solución: Mantén una base suficientemente sólida, ajusta el color del texto y comprueba el contraste compuesto con el contenido real.

El efecto cuesta demasiado

Resultado esperado: Esperas una experiencia fluida.
Causa: El coste depende de la escena, el área filtrada, los efectos y el dispositivo.
Solución: Limita el efecto a donde aporte valor. Evita anidarlo o animarlo sin necesidad y mide en los dispositivos objetivo; no hay un radio universalmente seguro.

Soporte y compatibilidad

Consulta el estado Baseline y la compatibilidad de backdrop-filter en los navegadores.

Para seguir explorando, compara este resultado con filter: actúa sobre el elemento completo y su contenido.

Explorar el lab de filter