El efecto cristal esmerilado: la escarcha en CSS

El cristal esmerilado de una puerta deja pasar la luz y desdibuja las formas. La escarcha hace lo mismo con el vídeo de fondo: lo desenfoca ligeramente, lo justo para que un texto colocado delante se lea sin tener que oscurecer la imagen. De las diez texturas de la biblioteca, es la más útil para la lectura, y la más cara para el navegador.

Sin

Escarcha

De dónde viene el efecto

En las interfaces, el cristal esmerilado se ha convertido en un material en sí mismo. Microsoft hizo de él el acrílico de su sistema de diseño Fluent: una superficie translúcida, hecha de un desenfoque, un ruido ligero y un tinte, que añade profundidad y ayuda a establecer la jerarquía en pantalla (Microsoft Learn). Apple, por su parte, describe materiales de grosor variable. Los más opacos ofrecen mejor contraste al texto; los más finos dejan ver el contenido de debajo y ayudan a no perder la orientación (Apple, Human Interface Guidelines).

En la web, el efecto pasa por una propiedad CSS, backdrop-filter, que aplica un filtro, un desenfoque por ejemplo, a todo lo que hay detrás de un elemento. Funciona en los navegadores recientes desde septiembre de 2024 (MDN).

Cuándo usarlo

La escarcha salva un fondo demasiado detallado bajo un texto. Oscurecer más la imagen la apaga; la escarcha la mantiene luminosa y le quita sus pequeños detalles, los que pelean con las letras. Ayuda a:

• un restaurante o una tienda de comestibles filmados en pleno servicio, con gente y puestos;
• un evento filmado entre el público, bajo los focos;
• un alojamiento cuya vista, una calle animada, un puerto, un follaje, rebosa de detalles;
• una agencia cuyo vídeo de fondo es denso, lleno de pequeños elementos en movimiento.

Ninguna de las veinticuatro maquetaciones del estudio la aplica por defecto. Se toma como remedio, cuando la página lo necesita, y la hoja de estilos de la biblioteca la reserva a los fondos de vídeo cargados.

Cuándo prescindir de ella. Sobre un fondo liso o un degradado, no hay nada que desenfocar: el navegador pagaría el cálculo por un resultado invisible. Lo mismo para un vídeo ya suave, una bruma, un agua en calma. Y si la imagen misma lleva el mensaje, el gesto de un artesano o un plato que se emplata, desenfocarla le quita su argumento.

La dosis justa

La escarcha se regula a 3 píxeles de desenfoque, con una saturación subida un 8 % para que la imagen no parezca deslavada. Tres píxeles borran los pequeños detalles, rostros lejanos, letreros, hojas, y conservan las masas y los colores. Más fuerte, borra también las formas, y la película pierde su tema.

Se coloca entre el fondo y el contenido: desenfoca el vídeo, y el texto queda nítido. La hoja de estilos de la biblioteca guarda la huella de una primera versión, colocada sobre todo como las otras capas: desenfocaba la página entera, texto incluido, y la volvía ilegible.

Como las otras texturas, deja en paz la primera pantalla: el vídeo de bienvenida queda nítido, y el desenfoque llega con el desplazamiento, detrás de las secciones que siguen. Sirve, pues, a las páginas cuyo fondo queda visible bajo el contenido. La escarcha cuenta como una de las dos texturas como mucho; con el viñeteado, forma una pareja sobria, una para los detalles, la otra para los bordes.

Lo que cuesta

Es la única textura de la biblioteca que cuesta de verdad. Un desenfoque se aplica a lo que está pintado detrás del elemento. Mientras el vídeo se reproduce, esa imagen cambia, y el navegador rehace el desenfoque, sobre toda la superficie, en cada imagen de la película.

Los fabricantes lo dicen, cada uno a su manera. web.dev advierte de que backdrop-filter puede perjudicar el rendimiento, y aconseja probar antes de publicar. Microsoft escribe que el renderizado de su acrílico exige mucho de la tarjeta gráfica, aumenta el consumo y reduce la autonomía de la batería; Windows lo sustituye por un color plano cuando el ahorro de batería está activado.

En la práctica:

• resérvala a los fondos de vídeo realmente cargados;
• prueba la página en un teléfono de gama de entrada, además de en tu ordenador;
• no apiles dos superficies desenfocadas: Microsoft también lo desaconseja para su acrílico, que crea entonces ilusiones ópticas molestas.

La capa no tiene animación propia. Su desenfoque sigue el desplazamiento, de cero a tres píxeles, durante la primera pantalla, y luego deja de moverse; durante esa subida, el navegador recalcula además el desenfoque en cada paso.

Accesibilidad

• Contraste. El desenfoque ayuda a la lectura, y aun así hay que medir: al menos 4,5 a 1 entre el texto corriente y su fondo (WCAG 2.2, criterio 1.4.3), a comprobar en el pasaje más claro de la película. Apple aconseja un material más grueso, y por tanto más opaco, cuando el texto es fino.
• Movimiento reducido. Cuando el visitante pide menos animación (prefers-reduced-motion), la escarcha desaparece, como el grano. La hoja de estilos de la biblioteca da la razón: sin película en movimiento, cuesta caro y no aporta nada. El vídeo de fondo se borra entonces, y su imagen de portada se queda. Si tu sistema pide este repliegue, la imagen marcada «Escarcha», arriba, se ha quedado nítida.
• Transparencia reducida. Windows, macOS e iOS ofrecen también un ajuste para reducir la transparencia, que CSS lee con prefers-reduced-transparency. MDN lo clasifica todavía como experimental, ausente de varios navegadores importantes. En el estudio, el repliegue de la escarcha sigue el ajuste del movimiento.
• Sin destellos. El desenfoque no late: nada en él se enciende ni se apaga.

Cómo está hecho

Una capa a pantalla completa, transparente, que lleva backdrop-filter: blur(): el navegador desenfoca todo lo que está pintado detrás de ella (MDN). La capa se coloca en el nivel cero, por encima del fondo animado y por debajo del contenido, y una consulta de medios la retira cuando se pide el movimiento reducido.

.m.m--givre {
  z-index: 0;
  backdrop-filter: blur(calc(var(--givre, 3) * var(--m-voile, 1) * 1px)) saturate(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .m--givre { display: none; }
}

Una trampa, señalada por MDN: si un elemento padre de la capa tiene una opacidad inferior a 1, el filtro ya no ve lo que hay detrás de ese padre, y el desenfoque parece no hacer nada.

En el estudio

La escarcha es una de las diez texturas de la biblioteca. Se elige en la etapa «La textura», después del fondo, y solo si el fondo es un vídeo cargado.