El efecto halación: el halo de la película en un sitio web

En una foto de película, las luces fuertes desbordan. Una lámpara, una ventana, el reflejo en un vaso se rodean de un halo cálido, rojo anaranjado en la película en color: es la halación. En un sitio, la capa del mismo nombre coloca este halo sobre la página, en el color de acento, para que la luz pertenezca a la paleta. La imagen parece salir de una película más que de un sensor.

Sin

Halación

De dónde viene el efecto

Una película está hecha de capas sensibles colocadas sobre un soporte transparente. Una luz muy fuerte atraviesa estas capas, se refleja en el soporte o en la placa de presión de la cámara, y vuelve a impresionar la capa sensible al rojo, alrededor de la fuente. El fabricante CineStill describe en estos términos el halo que se observa en las altas luces sobreexpuestas.

Durante casi un siglo, Kodak protegió sus películas de cine en color con una capa negra en el dorso del soporte, el rem-jet, que detenía la halación, las chispas de electricidad estática y las rayas. En 2025, el fabricante anunció su sustitución, en sus negativos VISION3, por una subcapa antihalo colocada bajo la emulsión y retirada en el revelado. Según sus pruebas comparativas, controla la halación aún mejor que la antigua capa.

Sin embargo, el efecto ha encontrado sus aficionados. CineStill fabrica películas en color sin capa antihalo, y el halo rojo de sus altas luces se ha convertido en su firma; el fabricante señala que muchos fotógrafos la han adoptado. Lo que la industria trataba como un defecto, los sitios web lo retoman como textura.

Cuándo usarla

La halación conviene a las páginas que viven de la luz de la noche y de fuentes visibles:

• una sala de restaurante o un bar, sus lámparas colgantes, sus velas, sus copas;
• una peluquería o un instituto de belleza, sus espejos iluminados;
• un estudio creativo o de imagen generada, para quien la luz es el tema;
• un sello, una sala de conciertos, con sus focos;
• un lanzamiento de producto, puesto en escena como un cartel de cine.

Cinco maquetaciones del estudio la aplican por defecto. La maquetación Mesa, la maquetación Salón y la maquetación Marca de producto la llevan sola. La maquetación Estudio 3D la combina con las líneas de trama, y la maquetación Sello con el polvo.

Cuándo prescindir de ella. Sobre un vídeo frío, azul o gris, un halo cálido desentona. Una página que debe inspirar rigor, una asesoría contable o una oficina de ingeniería, prescinde de una luz que se corre. Y sobre una paleta muy clara, la capa no tiene margen: solo puede aclarar, y un fondo blanco ya lo está.

La dosis justa

En la biblioteca, la capa se coloca al 35 % de opacidad. Está hecha de dos halos en el color de acento del sitio: el primero, más denso, un poco por encima y a la derecha del centro; el segundo, más débil, abajo a la izquierda. Los dos se apagan mucho antes de los bordes.

Estos dos halos guardan su lugar, sean cuales sean las luces de tu película. La capa funciona mejor cuando el vídeo está iluminado más o menos desde esos puntos, o cuando su luz es lo bastante difusa para que la posición importe poco. Sobre una película iluminada por una sola lámpara, colocada en otro sitio, mira el resultado antes de quedártelo.

Como las otras texturas, la halación deja desnuda la primera pantalla y sube a medida que se baja. Y la regla vale: dos capas como mucho. La halación va bien con una textura, líneas de trama o polvo, que trabaja la superficie mientras ella trabaja la luz; a tres capas, la imagen se ensucia.

Lo que cuesta

Poco. Dos degradados, dibujados una vez por el navegador, sin ningún archivo que descargar, colocados en posición fija. La hoja de estilos de la biblioteca cuenta la halación entre las capas ligeras: solo una, la escarcha, cuesta de verdad.

No se anima. Lo único que varía es su opacidad durante el primer desplazamiento, y la opacidad es una de las dos propiedades que un navegador sabe cambiar sin repintar la pantalla (web.dev). El movimiento viene de la película de debajo, nunca de la textura de encima.

Accesibilidad

• Contraste. La capa aclara todo lo que cubre, texto incluido. En una página oscura, sube ligeramente el fondo detrás de un texto claro, y reduce así la distancia entre ambos. Comprueba el contraste donde el halo es más denso, por encima y a la derecha del centro: al menos 4,5 a 1 para el texto corriente (WCAG 2.2, criterio 1.4.3).
• Movimiento reducido. El grano y la escarcha desaparecen cuando el visitante pide menos animación (prefers-reduced-motion). La halación se queda: está quieta.
• Sin destellos. El halo no late ni sigue al ratón. Nada en esta capa se enciende ni se apaga.

Cómo está hecha

Dos degradados radiales, radial-gradient(), en el color de acento mezclado con transparencia, y un modo de fusión, mix-blend-mode: screen. En modo screen (trama), el navegador invierte los dos colores, los multiplica e invierte el resultado (MDN): la capa solo puede aclarar. Así es como la luz se suma a la luz, y por eso el halo se ve sobre todo en las zonas oscuras.

.m.m--halation {
  mix-blend-mode: screen;
  opacity: calc(var(--halation, .35) * var(--m-voile, 1));
  background:
    radial-gradient(58% 44% at 68% 38%,
      color-mix(in srgb, var(--accent) 42%, transparent), transparent 66%),
    radial-gradient(70% 60% at 22% 72%,
      color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}

El halo toma el color de acento del sitio, el de sus botones. Una halación rojo anaranjada, como en la película, pide por tanto un acento cálido; con un acento verde o azul, se convierte en un resplandor de neón. Para un flujo cálido que entra por una esquina, la biblioteca tiene otra textura, la fuga de luz.

En el estudio

La halación es una de las diez texturas de la biblioteca. Se elige en la etapa «La textura», después del fondo.