# Overlay de gradiente em CSS: escureça e tinja imagens do jeito certo

[Canonical HTML page](https://gradiently.design/pt-br/guide/css-gradient-overlay)

Colocar um gradiente sobre uma foto exige uma linha a mais de CSS. Escolher o método certo entre três decide se a imagem carrega rápido, se o overlay pode ser animado e se o texto por cima continua legível.

## The short version

- O overlay de gradiente mais rápido em CSS é uma segunda camada de fundo: liste o gradiente antes de url() no background-image para que ele fique por cima.
- Para um elemento img, coloque o gradiente num pseudo-elemento ::before ou ::after de um contêiner posicionado.
- background-blend-mode e mix-blend-mode transformam um overlay de gradiente num banho de cor que tinge a imagem em vez de cobri-la.
- Imagens de hero definidas como fundo CSS são descobertas mais tarde do que elementos img, por isso um img com overlay costuma carregar mais rápido no topo da página.
- Overlays que vão receber texto devem ser mais escuros atrás das palavras e transparentes no resto, e não uma película escura uniforme sobre a foto inteira.

O **overlay de gradiente em CSS** mais simples é um fundo em camadas: `background-image: `linear-gradient(`rgb(2 6 23 / 0.6)`, rgb(2 6 23 / 0))`, url(photo.jpg)`. As camadas listadas primeiro são desenhadas por cima, então o gradiente fica sobre a foto. Quando a imagem é um elemento `<img>`, coloque o gradiente num pseudo-elemento, e quando quiser que a cor tinja a foto em vez de cobri-la, acrescente um blend mode. Cada método serve para uma tarefa diferente.

## Método 1: um fundo em camadas

`background-image` aceita uma lista separada por vírgulas. O primeiro valor é a camada de cima. Gradientes e imagens se misturam livremente, e cada camada pode ter seu próprio tamanho e posição se você listar essas propriedades na mesma ordem. É a escolha certa para imagens decorativas, que não precisam de texto alternativo.

```css
.banner {
  background-color: #0f172a; /* shows until the photo loads */
  background-image:
    linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%),
    url("/images/workshop.jpg");
  background-size: cover;
  background-position: center;
  color: #f8fafc;
}
```

Um painel escuro à esquerda para o texto, que clareia até 70 por cento para que o lado direito da foto continue luminoso. A cor de reserva combina com o overlay, então o texto já se lê antes de a imagem chegar.

- Painel lateral para texto: `linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%)`
- Faixas em cima e embaixo: `linear-gradient(to bottom, rgb(2 6 23 / 0.6) 0%, rgb(2 6 23 / 0) 25%, rgb(2 6 23 / 0) 65%, rgb(2 6 23 / 0.75) 100%)`
- Vinheta suave: `radial-gradient(ellipse at center, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.55) 100%)`
- Tinta de marca na diagonal: `linear-gradient(135deg, rgb(109 40 217 / 0.85) 0%, rgb(236 72 153 / 0.55) 100%)`

Quatro presets de overlay, mostrados aqui sobre a página. Coloque qualquer um deles antes de `url()` no seu próprio `background-image`.

As faixas em cima e embaixo funcionam em galerias com título no alto e crédito embaixo. A vinheta puxa o olhar para dentro sem carregar texto. A tinta de marca é um visual forte para páginas de equipe e banners de eventos; [overlays de gradiente](https://gradiently.design/pt-br/guide/gradient-overlay) explica quando cada um funciona do ponto de vista do design.

## Método 2: um pseudo-elemento sobre um img

Imagens de conteúdo pertencem a elementos `<img>`: ganham texto alternativo, `srcset` responsivo, carregamento lento e descoberta antecipada pelo navegador. Um gradiente de fundo não consegue ficar sobre um `<img>`, então envolva a imagem e coloque o gradiente no pseudo-elemento do contêiner.

```html
<figure class="overlay">
  <img src="/images/harbour.jpg" alt="Fishing boats moored in a small harbour at dusk"
       width="1920" height="1080" fetchpriority="high">
  <figcaption>Harbour Days, 14 to 16 June</figcaption>
</figure>
```

Um elemento de imagem de verdade, com texto alternativo de verdade. A legenda vai ficar sobre o overlay.

```css
.overlay {
  position: relative;
  margin: 0;
  isolation: isolate;
}

.overlay img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(2 6 23 / 0.75), rgb(2 6 23 / 0) 60%);
  pointer-events: none;
  transition: opacity 250ms ease-out;
}

.overlay figcaption {
  position: absolute;
  inset: auto 1.5rem 1.5rem;
  z-index: 1;
  color: #f8fafc;
}

.overlay:hover::after { opacity: 0.6; }
```

`isolation: isolate` mantém o empilhamento do overlay dentro da figura. O overlay pode esmaecer no hover porque é uma camada própria.

### Camada de fundo

- Um elemento, uma declaração
- Sem texto alternativo, então só para imagens decorativas
- Descoberta tarde pelo navegador, o que pode atrasar um hero
- O overlay não esmaece sem animar o fundo inteiro

### img mais pseudo-elemento

- Um contêiner e algumas linhas a mais
- Texto alternativo adequado e `srcset` responsivo
- Descoberta cedo; `fetchpriority="high"` ajuda a imagem principal
- A opacidade do overlay transiciona com baixo custo

Para uma imagem de hero que é o maior elemento da tela, o segundo método costuma vencer em velocidade de carregamento. [Otimizar imagens para a web](https://gradiently.design/pt-br/guide/lighthouse-image-performance) explica por que o navegador encontra elementos `<img>` antes dos fundos CSS.

## Método 3: blend modes para banhos de cor

Um overlay simples fica sobre a foto como um vidro colorido. Um blend mode mistura o gradiente com as luzes e sombras da própria foto, e o resultado parece que a foto foi feita naquela cor. Use `background-blend-mode` para fundos em camadas e `mix-blend-mode` num pseudo-elemento sobre um `<img>`.

| Blend mode | O que faz | Bom overlay para |
| --- | --- | --- |
| `multiply` | Escurece; as áreas brancas assumem a cor do gradiente | Tons ricos e dramáticos em fotos claras |
| `screen` | Clareia; as áreas pretas assumem a cor | Visuais leves e desbotados em fotos escuras |
| `overlay` | Aumenta o contraste e leva a cor aos meios-tons | Cor de marca intensa em retratos |
| `color` | Mantém a luz da foto e substitui a cor | Banhos estilo duotone a partir de um gradiente de duas cores |
| `soft-light` | Uma versão suave do overlay | Um toque sutil de calor ou frio |

Os cinco modos que vale conhecer. `color` com um gradiente de duas cores é o duotone mais rápido da web.

```css
/* Duotone wash on a layered background */
.duotone {
  background-image:
    linear-gradient(135deg, #1e1b4b 0%, #f472b6 100%),
    url("/images/portrait.jpg");
  background-size: cover;
  background-blend-mode: color;
}

/* The same idea over an img element */
.overlay--wash::after {
  background: linear-gradient(135deg, #1e1b4b, #f472b6);
  mix-blend-mode: color;
}
```

`background-blend-mode` mistura as camadas de um elemento. `mix-blend-mode` mistura um elemento com o que estiver atrás dele, aqui a foto.

A técnica completa, incluindo como escolher as duas cores, está em [o efeito duotone](https://gradiently.design/pt-br/guide/duotone-effect).

## Overlays que mantêm o texto legível

O erro mais comum é uma película escura uniforme sobre a foto inteira, digamos 50 por cento de preto. Ela apaga a imagem em todo lugar e talvez nem fique escura o bastante atrás das palavras. Dê forma ao overlay: mais escuro sob o texto, limpo onde a foto importa.

1. **Decida onde vão as palavras** Canto inferior esquerdo para legendas, terço esquerdo para o texto do hero, centro para uma única linha.
2. **Aponte o gradiente para elas** Use `to top` para texto embaixo, `to right` para texto à esquerda ou um radial centrado nas palavras.
3. **Pare cedo** Chegue à transparência total entre 60 e 70 por cento para que a maior parte da foto fique intacta.
4. **Confira o pior caso** Meça o contraste onde a foto é mais clara atrás de uma letra. [Contraste de cor e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility) lista as proporções.

Scrims suavizados com muitas paradas ficam mais lisos do que um esmaecimento de duas paradas; o método está em [gradientes transparentes em CSS](https://gradiently.design/pt-br/guide/css-gradient-transparent).

## Overlays sem adivinhação

Num site, você ajusta cada overlay à mão. Para posts, banners e slides, o Gradiently pula essa etapa: um Mark sabe onde estão suas palavras e aprofunda ou clareia as próprias cores atrás delas, as fotos podem ser tingidas nas cores do Mark como mono, duotone ou banho, e com o Pro o design se adapta a todos os formatos num passo só, sem overlay para refazer.

Um banner largo do evento Harbour Days com fundo em gradiente que escurece atrás do título

Um banner de evento no tamanho de hero de site, com o fundo se acalmando atrás das palavras em vez de um overlay ajustado à mão.

## FAQ

### Como coloco um gradiente sobre uma imagem de fundo em CSS?

Liste o gradiente antes da imagem em `background-image`: `linear-gradient(`rgb(0 0 0 / 0,5)`, transparent), url(photo.jpg)`. A primeira camada é desenhada por cima.

### Como adiciono um overlay de gradiente a um elemento img?

Envolva a imagem num elemento posicionado e coloque o gradiente no pseudo-elemento `::after` dele, com `position: absolute` e `inset: 0`.

### Qual é a diferença entre background-blend-mode e mix-blend-mode?

`background-blend-mode` mistura as camadas de fundo de um elemento. `mix-blend-mode` mistura um elemento inteiro com o que está atrás dele.

### Quão escuro deve ser um overlay de imagem para texto?

Escuro o bastante para o texto passar nas verificações de contraste no ponto mais claro atrás dele. Dê forma ao gradiente para que seja mais escuro ali e limpo no resto.

### Dá para animar um overlay de gradiente no hover?

Sim. Coloque o overlay num pseudo-elemento e faça a transição da `opacity` dele, o que custa menos do que animar o próprio fundo.