# Efeito light leak: o brilho quente do filme no design

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

Aquelas faixas cor de âmbar na borda de uma foto antiga eram um defeito da câmera. Hoje são um dos climas mais calorosos do design. Veja como funcionam os vazamentos de luz e como criar versões convincentes no digital.

## The short version

- Um light leak, ou vazamento de luz, é um brilho ou uma faixa quente que aparece quando luz entra no filme por uma fresta da câmera.
- Os vazamentos de verdade costumam ficar na borda do quadro e passam por vermelho, laranja e amarelo, muitas vezes chegando quase ao branco onde a luz era mais forte.
- Um light leak digital convincente pode ser feito com degradês radiais ou lineares suaves em cores quentes, sobrepostos a uma imagem com mesclagem screen ou lighten.
- Os vazamentos de luz devem ficar longe do texto, porque uma área clara atrás das palavras reduz o contraste.
- Em vídeo, um light leak que atravessa o quadro em menos de um segundo cria uma transição suave entre os clipes.

O **efeito light leak** é o brilho quente laranja, vermelho e amarelo que aparece quando uma luz perdida atinge o filme fotográfico, em geral por uma tampa solta, uma vedação gasta ou uma fresta na hora de colocar o rolo. No filme era um acidente. No design virou um clima: nostálgico, ensolarado, um pouco imperfeito. Dá para recriar com degradês suaves em cores quentes, posicionados na borda do quadro e mesclados sobre uma imagem, e os detalhes abaixo são o que faz o efeito parecer real e não colado por cima.

## Como é um vazamento de luz de verdade

Como a luz entra por uma fresta, o vazamento quase sempre começa numa borda ou num canto e se dissolve para dentro. No filme colorido, o brilho costuma ir do vermelho profundo na ponta fraca, passando pelo laranja, até o amarelo e quase branco onde era mais forte. Ele clareia a foto em vez de escurecer, e não tem contorno duro.

- **Posição:** uma borda ou um canto, muitas vezes de um lado só.
- **Cor:** vermelho para laranja para amarelo claro, mais quente na borda externa do brilho.
- **Forma:** faixas verticais suaves ou um clarão difuso, nunca um círculo perfeito no meio.
- **Comportamento:** acrescenta luz, lavando as sombras por onde passa.
- **Variação:** nenhum quadro é igual ao outro, e isso faz parte do charme.

## Degradês de light leak para copiar

Cada um destes é um único degradê CSS que termina em transparente, então pode ficar por cima de uma foto ou de um fundo escuro. Aqui eles aparecem sozinhos sobre fundo escuro; em cima de uma foto, mescle como explica a próxima seção.

- Vazamento na borda esquerda: `radial-gradient(ellipse 45% 80% at 0% 50%, #fff3c4 0%, #ffb547 18%, #f0612e 38%, #a3202a 58%, transparent 82%)`
- Canto queimado: `radial-gradient(circle at 100% 0%, #fff7d6 0%, #ffc15a 14%, #ff7a3c 30%, #c2283a 48%, transparent 72%)`
- Faixa 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 vazamento. O centro claro fica na borda do quadro ou além dela, então só a dissolução aparece, como num vazamento real.

- Núcleo quente: #fff3c4
- Âmbar: #ffb547
- Tangerina: #f0612e
- Vermelho filme: #c2283a
- Vinho esmaecido: #6e1a35

Uma paleta de light leak, do ponto mais claro do brilho até onde ele morre na imagem. Mantenha a ordem: um vazamento nunca fica amarelo na ponta fraca.

## Como adicionar um light leak em CSS

Coloque o degradê numa camada acima da imagem e mescle com `screen`, que só clareia, igual à luz perdida. Baixe a opacidade até a foto continuar bem legível. A [referência de mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) do MDN lista os outros modos; `lighten` e `soft-light` também valem o teste.

```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 vazamento na borda esquerda sobre qualquer imagem. O degradê termina em transparente, e a mesclagem screen faz com que ele só possa acrescentar calor e luz.

Para parecer mais com filme, coloque granulação por cima de tudo e esquente um pouco as sombras. [Degradês granulados](https://gradiently.design/pt-br/guide/grainy-gradients) e [overlay de degradê em CSS](https://gradiently.design/pt-br/guide/css-gradient-overlay) explicam as duas camadas.

> **Monte um pequeno conjunto, não um vazamento só** Crie quatro ou cinco vazamentos em posições e intensidades diferentes e vá espelhando e girando conforme usa. O filme de verdade nunca vaza do mesmo jeito duas vezes, então repetir o mesmo overlay num carrossel ou num grid é o jeito mais rápido de entregar o truque.

Preste atenção também na ordem das cores. A maioria dos vazamentos pouco convincentes fica num laranja chapado de ponta a ponta ou vira rosa na ponta clara. Deixe o ponto mais quente claro e levemente amarelo, esfrie passando pelo âmbar até o vermelho, e deixe o vermelho sumir na imagem em vez de terminar numa borda visível.

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

### Evite

- Um vazamento claro atrás de um título
- O mesmo vazamento em todas as imagens de uma série
- Um círculo perfeito de brilho no centro
- Vazamentos azuis ou verdes frios em fotos quentes
- Vazamentos tão fortes que o assunto desaparece

### Faça

- Vazamentos na borda oposta às palavras
- Varie posição e intensidade ao longo da série
- Comece o brilho na borda do quadro ou além dela
- Vermelho, âmbar e amarelo claro, como o filme registra
- Opacidade suficiente para aquecer, sem lavar a foto

Os light leaks combinam com fotógrafos, festivais de cinema, músicos, campanhas de verão, viagens e tudo que é nostálgico. Eles casam naturalmente com paletas de [degradês retrô](https://gradiently.design/pt-br/guide/retro-gradients) e fotos quentes e desbotadas. Combinam menos com marcas precisas e técnicas, porque a graça toda está na imperfeição.

Um post retrato de evento para um cinema no terraço, com cores quentes de filme brilhando a partir de uma borda

Uma superfície quente com o brilho de um lado só, e as palavras no lado calmo do quadro.

Uma capa quadrada de lançamento musical chamada Lado B, com cores quentes de filme

Uma capa quadrada de lançamento em que o calor e a granulação carregam a nostalgia, e não um overlay carregado.

## Light leaks em vídeo e animação

Em vídeo, os light leaks costumam ser usados como transição: um clarão quente atravessa o quadro em mais ou menos meio segundo, chega quase ao branco e revela o próximo clipe. Use curtos e de vez em quando. Um vazamento entre cenas parece filme; um em cada corte parece pacote de filtros.

Para posts estáticos que precisam de calor sem overlay, um fundo vivo e quente faz o mesmo trabalho com mais discrição. No Gradiently, a luz e a granulação de um Mark são renderizadas ao vivo em qualquer tamanho, e a área mais calma dele vai sozinha para trás das suas palavras, então uma superfície ensolarada e cinematográfica nunca coloca o ponto mais claro atrás de um título. Fotos adicionadas no Studio também podem receber um banho quente nas cores do Mark, para que imagem e fundo compartilhem o mesmo brilho. Para o efeito parecido de luz em volta de formas, veja [efeito de brilho](https://gradiently.design/pt-br/guide/glow-effect); para fotógrafos especificamente, [identidade visual para fotógrafos](https://gradiently.design/pt-br/guide/photographer-branding).

## FAQ

### O que é o efeito light leak?

Um brilho quente vermelho, laranja ou amarelo que aparece quando luz perdida atinge o filme por uma fresta da câmera. Hoje os designers recriam esse efeito no digital para um clima nostálgico e ensolarado.

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

Coloque um degradê quente e suave, que termina em transparente, na borda de uma imagem e mescle no modo screen ou lighten, depois baixe a opacidade e acrescente um pouco de granulação.

### Quais são as cores de um light leak?

Em geral vermelho profundo na ponta fraca, passando por laranja e âmbar, até amarelo claro ou quase branco onde a luz era mais forte.

### Posso colocar texto sobre um light leak?

É melhor não. A parte clara do vazamento reduz o contraste do texto, então posicione o vazamento no lado do quadro oposto às suas palavras.