# Efecto light leak: el brillo cálido de la película

[Canonical HTML page](https://gradiently.design/es/guide/light-leaks)

Esas vetas ámbar en el borde de una foto antigua eran un fallo de la cámara. Ahora son uno de los ambientes más cálidos del diseño. Así funcionan los light leaks y así se hacen convincentes en digital.

## The short version

- Un light leak, o fuga de luz, es un brillo o veta cálida que aparece cuando luz extraviada llega a la película por una rendija de la cámara.
- Las fugas de luz reales suelen quedar en el borde del cuadro y recorren rojos, naranjas y amarillos, a menudo desvaneciéndose hacia el blanco donde la luz era más fuerte.
- Un light leak digital convincente se puede hacer con degradados suaves radiales o lineales en colores cálidos, superpuestos a una imagen con una mezcla de trama o aclarar.
- Los light leaks deben mantenerse lejos del texto, porque una mancha brillante detrás de las palabras reduce su contraste.
- En vídeo, un light leak que barre el cuadro en menos de un segundo crea una transición suave entre clips.

El **efecto light leak** es el brillo cálido naranja, rojo y amarillo que aparece cuando luz extraviada llega a la película fotográfica, normalmente por una tapa trasera floja, una junta gastada o una rendija al cargar. En película era un accidente. En diseño se ha convertido en un ambiente: nostálgico, soleado, un poco imperfecto. Puedes recrearlo con degradados suaves en colores cálidos colocados en el borde del cuadro y mezclados sobre una imagen, y los detalles de abajo son lo que hace que parezca real y no pegado.

## Cómo se ve un light leak real

Como la luz entra por una rendija, una fuga casi siempre empieza en un borde o una esquina y se desvanece hacia dentro. En película en color, el brillo suele ir del rojo profundo en el extremo tenue, pasando por el naranja, al amarillo y casi blanco donde era más fuerte. Aclara la imagen en lugar de oscurecerla, y no tiene contorno duro.

- **Posición:** un borde o una esquina, a menudo solo un lado.
- **Color:** de rojo a naranja a amarillo pálido, más cálido en el borde exterior del brillo.
- **Forma:** vetas verticales suaves o un resplandor difuso, nunca un círculo perfecto en el centro.
- **Comportamiento:** añade luz y lava las sombras donde cae.
- **Variación:** no hay dos fotogramas iguales, y eso es parte del encanto.

## Degradados de light leak que puedes copiar

Cada uno es un único degradado CSS que se desvanece a transparente, así que puede ir sobre una foto o un fondo oscuro. Solos, aquí se ven sobre un fondo oscuro; sobre una foto, mézclalos como se describe en la siguiente sección.

- Fuga en el borde izquierdo: `radial-gradient(ellipse 45% 80% at 0% 50%, #fff3c4 0%, #ffb547 18%, #f0612e 38%, #a3202a 58%, transparent 82%)`
- Quemadura de esquina: `radial-gradient(circle at 100% 0%, #fff7d6 0%, #ffc15a 14%, #ff7a3c 30%, #c2283a 48%, transparent 72%)`
- Veta vertical: `linear-gradient(100deg, transparent 0%, transparent 52%, #b3262e 60%, #ff8a3d 68%, #fff0b8 74%, #ff8a3d 80%, #b3262e 88%, transparent 96%)`
- Resplandor inferior: `radial-gradient(ellipse 70% 50% at 50% 110%, #ffe0a3 0%, #ff9d4a 22%, #e0473a 42%, #6e1a35 62%, transparent 85%)`

Cuatro posiciones clásicas de fuga. El centro brillante queda en el borde del cuadro o más allá, de modo que solo se ve la caída, como en una fuga real.

- Núcleo ardiente: #fff3c4
- Ámbar: #ffb547
- Mandarina: #f0612e
- Rojo película: #c2283a
- Degradado a vino: #6e1a35

Una paleta de light leak, del punto más brillante del resplandor hasta donde se apaga en la imagen. Mantén el orden: una fuga nunca se vuelve amarilla en el extremo tenue.

## Cómo añadir un light leak en CSS

Pon el degradado en una capa sobre la imagen y mézclalo con `screen`, que solo aclara, igual que la luz extraviada. Baja la opacidad hasta que la foto se siga leyendo con claridad. La [referencia de mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) de MDN enumera los demás modos; `lighten` y `soft-light` también merece la pena probarlos.

```css
.photo {
  position: relative;
  isolation: isolate;
}

.photo img {
  display: block;
  width: 100%;
}

.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 45% 80% at 0% 50%,
    #fff3c4 0%, #ffb547 18%, #f0612e 38%, #a3202a 58%, transparent 82%
  );
  mix-blend-mode: screen;
  opacity: 0.75;
  pointer-events: none;
}
```

Una fuga en el borde izquierdo sobre cualquier imagen. El degradado termina en transparente, y la mezcla screen significa que solo puede añadir calidez y luz.

Para que se parezca más a película, añade grano sobre todo y calienta ligeramente las sombras. [Degradados granulados](https://gradiently.design/es/guide/grainy-gradients) y [degradado superpuesto en css](https://gradiently.design/es/guide/css-gradient-overlay) tratan ambas capas.

> **Construye un pequeño conjunto, no una sola fuga** Haz cuatro o cinco fugas en distintas posiciones e intensidades y luego voltéalas y gíralas sobre la marcha. La película real nunca se fuga dos veces igual, así que repetir un mismo overlay en un carrusel o una cuadrícula es la forma más rápida de delatar el truco.

Cuida también el orden de los colores. La mayoría de las fugas poco convincentes se quedan en un naranja plano de borde a borde o se vuelven rosas en el extremo brillante. Mantén el punto más caliente pálido y ligeramente amarillo, deja que se enfríe pasando por ámbar hasta el rojo, y deja que el rojo desaparezca en la imagen en lugar de terminar en un borde visible.

## Dónde funcionan los light leaks y dónde no

### Evita

- Una fuga brillante detrás de un titular
- La misma fuga en todas las imágenes de un conjunto
- Un círculo perfecto de brillo en el centro
- Fugas azules o verdes frías sobre fotos cálidas
- Fugas tan fuertes que el protagonista desaparece

### Haz

- Fugas en el borde opuesto a tus palabras
- Varía la posición y la intensidad en una serie
- Empieza el brillo en el borde del cuadro o más allá
- De rojo a ámbar a amarillo pálido, como lo registra la película
- Opacidad suficiente para sentir calidez, sin lavar la imagen

Los light leaks encajan con fotógrafos, festivales de cine, músicos, campañas de verano, viajes y todo lo nostálgico. Combinan de forma natural con paletas de [degradado retro](https://gradiently.design/es/guide/retro-gradients) y fotos cálidas y desvaídas. Encajan menos con marcas precisas y técnicas, porque todo el sentido está en la imperfección.

Una publicación vertical de evento para un cine en la azotea con cálidos colores de película que brillan desde un borde

Una superficie cálida con el brillo en un solo lado y las palabras en el lado tranquilo del cuadro.

Una portada cuadrada de lanzamiento musical titulada Cara B con color cálido y cinematográfico

Una portada cuadrada de lanzamiento donde la calidez y el grano llevan la nostalgia, no un overlay recargado.

## Light leaks en vídeo y animación

En vídeo, los light leaks se usan a menudo como transiciones: un destello cálido barre el cuadro durante medio segundo, alcanza casi el blanco en su punto álgido y revela el siguiente clip. Hazlos cortos y ocasionales. Una fuga entre escenas se siente como película; una en cada corte se siente como un paquete de filtros.

Para publicaciones estáticas que necesitan calidez sin overlay, un fondo cálido y vivo hace el mismo trabajo con más discreción. En Gradiently, la luz y el grano de un Mark se renderizan en vivo en cada tamaño, y su zona más tranquila se mueve sola detrás de tus palabras, de modo que una superficie soleada y cinematográfica nunca pone su mancha más brillante detrás de un titular. Las fotos añadidas en el Studio también pueden recibir un lavado cálido con los colores del Mark, para que imagen y fondo compartan el mismo brillo. Para el efecto relacionado de la luz alrededor de las formas, mira [efecto glow](https://gradiently.design/es/guide/glow-effect); para fotógrafos en concreto, [identidad visual para fotógrafos](https://gradiently.design/es/guide/photographer-branding).

## FAQ

### ¿Qué es el efecto light leak?

Un brillo cálido rojo, naranja o amarillo que aparece cuando luz extraviada llega a la película por una rendija de la cámara. Los diseñadores ahora lo recrean en digital para lograr un ambiente nostálgico y soleado.

### ¿Cómo hago un efecto light leak?

Coloca un degradado cálido suave que se desvanezca a transparente en el borde de una imagen y mézclalo en modo screen o aclarar, luego baja su opacidad y añade un poco de grano.

### ¿De qué colores son los light leaks?

Normalmente rojo profundo en el extremo tenue, pasando por naranja y ámbar, hasta amarillo pálido o casi blanco donde la luz era más fuerte.

### ¿Puedo poner texto sobre un light leak?

Es mejor no hacerlo. La parte brillante de una fuga reduce el contraste del texto, así que coloca la fuga en el lado opuesto del cuadro a tus palabras.