# Efeito light leak: o brilho quente de película no design

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

Aquelas riscas âmbar na borda de uma fotografia antiga eram uma falha da máquina. Hoje são um dos ambientes mais quentes do design. Aqui fica como funcionam os light leaks e como fazer convincentes em digital.

## The short version

- Um light leak é um brilho ou uma risca quente que aparece quando luz parasita chega à película por uma fresta da máquina.
- Os light leaks reais ficam normalmente na borda do enquadramento e percorrem vermelho, laranja e amarelo, muitas vezes esbatendo-se para branco onde a luz foi mais forte.
- Um light leak digital convincente faz-se com gradientes suaves radiais ou lineares em cores quentes, sobrepostos a uma imagem com um modo de mistura screen ou lighten.
- Os light leaks devem ficar longe do texto, porque uma mancha brilhante por trás das palavras reduz o seu contraste.
- Em vídeo, um light leak que atravessa o enquadramento em menos de um segundo faz uma transição suave entre clipes.

O **efeito light leak** é o brilho quente laranja, vermelho e amarelo que aparece quando luz parasita chega à película fotográfica, normalmente por uma tampa solta, uma vedação gasta ou uma fresta durante o carregamento. Na película era um acidente. No design passou a ser um ambiente: nostálgico, banhado de sol, um pouco imperfeito. Podes recriá-lo com gradientes suaves em cores quentes postos na borda do enquadramento e misturados com uma imagem, e os pormenores abaixo são o que o fazem parecer real e não colado.

## Como é um light leak verdadeiro

Como a luz entra por uma fresta, um leak quase sempre começa numa borda ou num canto e esbate-se para dentro. Na película a cores, o brilho percorre normalmente do vermelho profundo na ponta mais fraca, passando pelo laranja, até ao amarelo e quase branco onde foi mais forte. Ilumina a imagem em vez de a escurecer e não tem contorno duro.

- **Posição:** uma borda ou um canto, muitas vezes só de um lado.
- **Cor:** de vermelho a laranja a amarelo pálido, mais quente na borda exterior do brilho.
- **Forma:** riscas verticais suaves ou um clarão difuso, nunca um círculo perfeito no meio.
- **Comportamento:** acrescenta luz, lavando as sombras onde cai.
- **Variação:** não há dois fotogramas iguais, o que faz parte do encanto.

## Gradientes de light leak que podes copiar

Cada um destes é um único gradiente CSS que esbate para transparente, para poder ficar por cima de uma fotografia ou de um fundo escuro. Sozinhos, aparecem aqui sobre fundo escuro; sobre uma fotografia, mistura-os como se descreve na secção seguinte.

- Leak na borda esquerda: `radial-gradient(ellipse 45% 80% at 0% 50%, #fff3c4 0%, #ffb547 18%, #f0612e 38%, #a3202a 58%, transparent 82%)`
- Queimadura de canto: `radial-gradient(circle at 100% 0%, #fff7d6 0%, #ffc15a 14%, #ff7a3c 30%, #c2283a 48%, transparent 72%)`
- Risca vertical: `linear-gradient(100deg, transparent 0%, transparent 52%, #b3262e 60%, #ff8a3d 68%, #fff0b8 74%, #ff8a3d 80%, #b3262e 88%, transparent 96%)`
- Clarão inferior: `radial-gradient(ellipse 70% 50% at 50% 110%, #ffe0a3 0%, #ff9d4a 22%, #e0473a 42%, #6e1a35 62%, transparent 85%)`

Quatro posições clássicas de leak. O centro brilhante fica na borda do enquadramento ou para além dela, por isso só se vê o esbatimento, como num leak real.

- Núcleo quente: #fff3c4
- Âmbar: #ffb547
- Tangerina: #f0612e
- Vermelho película: #c2283a
- Esbatido vinho: #6e1a35

Uma paleta de light leak, do ponto mais brilhante do brilho até onde se perde na imagem. Mantém a ordem: um leak nunca fica amarelo na ponta fraca.

## Como juntar um light leak em CSS

Põe o gradiente numa camada acima da imagem e mistura-o com `screen`, que só clareia, tal como a luz parasita. Baixa a opacidade até a fotografia continuar a ler-se com clareza. A [referência de mix-blend-mode da MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) lista os outros modos; `lighten` e `soft-light` também merecem uma tentativa.

```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;
}
```

Um leak na borda esquerda sobre qualquer imagem. O gradiente termina em transparente, e a mistura screen faz com que só possa acrescentar calor e luz.

Para parecer mais película, junta grão por cima de tudo e aquece ligeiramente as sombras. Os [gradientes granulados](https://gradiently.design/pt-pt/guide/grainy-gradients) e a [sobreposição de gradiente em CSS](https://gradiently.design/pt-pt/guide/css-gradient-overlay) tratam das duas camadas.

> **Constrói um pequeno conjunto, não um só leak** Faz quatro ou cinco leaks em posições e intensidades diferentes e depois vira-os e roda-os à medida que avanças. A película real nunca deixa passar a luz da mesma maneira duas vezes, por isso repetir uma sobreposição num carrossel ou numa grelha é a forma mais rápida de denunciar o truque.

Repara também na ordem das cores. A maioria dos leaks pouco convincentes ou fica um laranja liso de uma borda à outra ou fica rosa na ponta brilhante. Mantém o ponto mais quente pálido e ligeiramente amarelo, deixa-o arrefecer através do âmbar até ao vermelho e deixa o vermelho desaparecer na imagem em vez de acabar numa borda visível.

## Onde os light leaks funcionam e onde não

### Evita

- Um leak brilhante por trás de um título
- O mesmo leak em todas as imagens de um conjunto
- Um círculo perfeito de brilho no centro
- Leaks azuis ou verdes frios em fotografias quentes
- Leaks tão fortes que o motivo desaparece

### Faz

- Leaks na borda oposta às tuas palavras
- Varia a posição e a intensidade numa série
- Começa o brilho na borda do enquadramento ou para além dela
- De vermelho a âmbar a amarelo pálido, como a película regista
- Opacidade suficiente para parecer quente, não lavado

Os light leaks servem fotógrafos, festivais de cinema, músicos, campanhas de verão, viagens e tudo o que seja nostálgico. Combinam naturalmente com paletas de [gradientes retro](https://gradiently.design/pt-pt/guide/retro-gradients) e fotografias quentes e desbotadas. Servem menos marcas precisas e técnicas, porque o essencial é a imperfeição.

Uma publicação vertical de evento de um cinema no terraço, com cores quentes de película a brilhar a partir de uma borda

Uma superfície quente com o brilho mantido de um lado e as palavras do lado calmo do enquadramento.

Uma capa quadrada de lançamento musical com o título Lado B e cor quente de película

Uma capa quadrada de lançamento em que o calor e o grão levam a nostalgia, não uma sobreposição carregada.

## Light leaks em vídeo e movimento

Em vídeo, os light leaks usam-se muitas vezes como transições: um clarão quente atravessa o enquadramento durante cerca de meio segundo, atinge o pico quase em branco e revela o clipe seguinte. Mantém-nos curtos e ocasionais. Um leak entre cenas parece película; um em cada corte parece um pacote de filtros.

Para publicações estáticas que precisam de calor sem uma sobreposição, um fundo vivo e quente faz o mesmo trabalho com mais discrição. No Gradiently, a luz e o grão de um Mark são renderizados ao vivo em todos os tamanhos, e a sua zona mais calma desloca-se sozinha para trás das tuas palavras, por isso uma superfície solar e de película nunca põe a sua mancha mais brilhante atrás de um título. As fotografias acrescentadas no Studio também podem receber um banho quente nas cores do Mark, para a imagem e o fundo partilharem o mesmo brilho. Para o efeito relacionado de luz à volta de formas, vê o [efeito de brilho](https://gradiently.design/pt-pt/guide/glow-effect); para fotógrafos em particular, a [identidade visual para fotógrafos](https://gradiently.design/pt-pt/guide/photographer-branding).

## FAQ

### O que é o efeito light leak?

Um brilho quente vermelho, laranja ou amarelo que aparece quando luz parasita chega à película por uma fresta da máquina. Os designers recriam-no agora em digital para um ambiente nostálgico e solar.

### Como faço um efeito light leak?

Põe um gradiente quente suave, que esbata para transparente, na borda de uma imagem e mistura-o com o modo screen ou lighten; depois baixa a opacidade e junta um pouco de grão.

### Que cores têm os light leaks?

Normalmente vermelho profundo na ponta fraca, passando por laranja e âmbar, até amarelo pálido ou quase branco onde a luz foi mais forte.

### Posso pôr texto sobre um light leak?

É melhor não. A parte brilhante de um leak reduz o contraste do texto, por isso põe o leak do lado oposto do enquadramento ao das tuas palavras.