Backdrop filter en CSS: cristal esmerilado que sigue siendo rápido

Un backdrop filter en CSS aplica un efecto gráfico, normalmente un desenfoque, a lo que queda detrás de un elemento. Escribe backdrop-filter: blur(12px) en un elemento con fondo parcialmente transparente y la página de debajo se suaviza: es el efecto de cristal esmerilado que se usa en barras de navegación, paneles y tarjetas. Funciona en todos los navegadores actuales. El oficio está en mantener pequeña la zona desenfocada, moderado el radio y legible la alternativa.

La receta básica del cristal esmerilado

Tres cosas hacen el cristal: un relleno translúcido para que se vea lo de detrás, el propio desenfoque y un borde tenue para que el panel tenga forma. La mayoría añade además un pequeño aumento de saturación, porque desenfocar promedia los colores y los deja más grises de lo que esperas.

.glass {
  background: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 16px;
}

El cristal solo parece cristal cuando detrás hay algo que merezca la pena desenfocar. Sobre una página gris plana, el panel simplemente se ve apagado. Ponlo sobre una fotografía o un degradado rico, como explica con más detalle glassmorphism.

Qué pueden hacer las funciones de backdrop-filter

La propiedad acepta las mismas funciones que filter, y puedes encadenarlas en una sola declaración. Se aplican en orden, de izquierda a derecha, así que blur() seguido de saturate() se comporta distinto que al revés. La lista completa está en MDN.

Rendimiento del backdrop filter

El desenfoque es una de las cosas más caras que dibuja un navegador. Para desenfocar una zona tiene que leer cada píxel detrás del elemento, muestrear sus vecinos hasta el radio del desenfoque y componer el resultado, y repite ese trabajo cada vez que cambia algo detrás del panel. Una cabecera fija sobre una página que se desplaza vuelve a dibujar su desenfoque en cada fotograma del scroll.

El coste depende de dos números que tú controlas: la superficie del elemento y el radio. Una cabecera de 64 píxeles desenfocada a 12px es barata en casi cualquier dispositivo. Una capa a pantalla completa desenfocada a 40px sobre un vídeo puede perder fotogramas en un móvil de gama media. El panorama completo está en rendimiento de los degradados CSS.

Por qué backdrop-filter no funciona

Cuando el desenfoque parece no hacer nada, la causa casi siempre está en una lista corta.

1. 1

   Comprueba que el fondo sea transparente

   Un background: #fff sólido tapa por completo el fondo desenfocado. Usa un valor con alfa como rgb(255 255 255 / 0.15).

2. 2

   Añade el prefijo de Safari

   Safari solo acepta la propiedad sin prefijo desde la versión 18. Los iPhone más antiguos siguen necesitando -webkit-backdrop-filter.

3. 3

   Busca una raíz de backdrop por encima

   Un elemento padre con filter, opacity por debajo de 1, una máscara o su propio backdrop filter limita lo que el hijo puede ver. El hijo entonces solo desenfoca ese padre, lo que a menudo parece que no hay desenfoque.

4. 4

   Vigila los hijos fijos

   Como filter, un backdrop filter convierte el elemento en el bloque contenedor de los hijos con posición fija y absoluta. Un menú fijo dentro de una cabecera de cristal se colocará respecto a la cabecera, no a la ventana.

5. 5

   Asegúrate de que haya algo detrás

   Un desenfoque sobre un color plano es invisible. Desplaza el panel sobre una imagen para confirmar que funciona.

Una alternativa que mantiene el texto legible

Los paneles translúcidos se diseñan contando con el desenfoque. Sin él, un relleno blanco al 14 por ciento sobre una foto recargada deja el texto sobre la propia foto, y el contraste se hunde. Escribe primero la versión legible y después mejórala donde el navegador pueda desenfocar.

/* Works everywhere: opaque enough to read on its own */
.glass {
  background: rgb(15 23 42 / 0.86);
  color: #f8fafc;
}

/* Upgrade where blur is available */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgb(15 23 42 / 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgb(15 23 42 / 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

Comprueba el contraste en el peor punto detrás del panel, no en la media. Un titular blanco sobre un cristal que se desplaza por un cielo luminoso puede quedar muy por debajo de las relaciones de contraste de color y accesibilidad. Oscurecer con brightness(0.7) suele arreglarlo de forma más fiable que desenfocar más.

Cuándo no necesitas ningún desenfoque

Mucho cristal esmerilado existe solo para que las palabras se lean sobre un fondo recargado. Si el fondo lo diseñas tú, uno más tranquilo resuelve el problema sin coste de renderizado. Un degradado suave y de bajo contraste detrás de una cabecera no necesita panel; consulta fondos para la cabecera de una web y fondos desenfocados, donde el desenfoque se integra una vez en la imagen en lugar de calcularse en cada fotograma.

Ese segundo enfoque es cómo resuelve Gradiently la legibilidad: un Mark sabe dónde están las palabras y desplaza detrás de ellas su zona más tranquila y con mejor contraste, así que nunca necesitas una caja ni un desenfoque para rescatar un titular.