# Sobreposição em gradiente: tingir fotos sem escondê-las

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

Uma boa sobreposição muda o clima da foto e dá ao seu texto um lugar para ficar, enquanto a imagem continua aparecendo. Uma ruim transforma toda foto no mesmo retângulo turvo. Veja como diferenciar as duas.

## The short version

- Uma sobreposição em gradiente é uma camada de cor que se apaga sobre a foto, usada para tingir a imagem, criar um clima ou abrir uma área mais calma para o texto.
- A sobreposição mais comum é a máscara de escurecimento: transparente numa borda e escura na outra, então só a parte da foto atrás do texto escurece.
- Uma sobreposição de lavagem de cor usa as cores da marca com opacidade parcial, muitas vezes com um modo de mesclagem como multiplicação, tela ou cor, para a foto manter os detalhes.
- As sobreposições funcionam melhor quando cobrem só a área que precisa de ajuda, em vez de escurecer a imagem inteira por igual.
- Se a máscara precisa passar de uns 80 por cento de opacidade na borda mais escura para o texto ficar legível, escolha uma foto mais calma ou mude o texto de lugar.

Uma **sobreposição em gradiente** é uma camada de cor que se apaga sobre uma foto, aplicada por cima para tingi-la, unificar um conjunto de imagens ou deixar um título legível. O segredo é que ela se apaga: uma parte da foto recebe muita cor, o resto quase nada. É por isso que uma sobreposição em gradiente parece pensada, enquanto uma caixa preta chapada a 50 por cento parece um remendo. Você escolhe onde a cor cai, com que força e como ela se mistura com a imagem embaixo.

## Quatro tipos de sobreposição em gradiente

Quase toda sobreposição que você vê em sites, pôsteres ou posts é de um destes quatro tipos. Saber qual você precisa poupa muito tempo mexendo em controles de opacidade.

| Sobreposição | O que faz | Use para |
| --- | --- | --- |
| Máscara | Do transparente ao escuro em uma borda | Títulos e legendas sobre fotos movimentadas |
| Lavagem de cor | Cores da marca com força parcial sobre a imagem inteira | Fazer fotos sem relação parecerem um conjunto |
| Duotone ou mapa de gradiente | Troca as cores da foto por duas ou mais das suas | Visuais fortes e gráficos; veja [o efeito duotone](https://gradiently.design/pt-br/guide/duotone-effect) |
| Vinheta | Escurece os cantos com uma transição radial | Levar o olhar para o centro |

As quatro famílias de sobreposição. A maioria dos designs precisa de só uma delas, não das quatro.

## A máscara: uma sobreposição para texto

A máscara é a peça mais usada. Ela começa totalmente transparente e escurece em direção à borda onde está o texto, geralmente embaixo ou à esquerda. A foto fica intacta onde está o assunto, e o texto ganha uma base escura e calma. Use um tom escuro da própria foto em vez de preto puro: um marrom profundo sobre um interior quente, um azul-marinho sobre uma paisagem marítima. Preto puro parece uma mancha.

- Máscara inferior, marinho: `linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.5) 75%, rgba(10, 12, 20, 0.8) 100%)`
- Máscara à esquerda, marrom quente: `linear-gradient(90deg, rgba(28, 18, 12, 0.8) 0%, rgba(28, 18, 12, 0.45) 35%, rgba(28, 18, 12, 0) 65%)`
- Vinheta: `radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(8, 8, 14, 0.7) 100%)`

Três sobreposições sozinhas, antes de qualquer foto ir por baixo. Cada uma fica transparente onde estaria o assunto.

Os 40 por cento superiores da máscara inferior são totalmente transparentes, o que mantém rostos e produtos claros. O escuro cresce pela metade de baixo e atinge o máximo bem na borda, exatamente onde fica a legenda. Para mais formas de manter o texto legível sobre imagens, leia [texto legível sobre fotos](https://gradiently.design/pt-br/guide/readable-text-on-photos).

## Lavagens de cor e modos de mesclagem

A lavagem de cor é como as marcas fazem fotos de banco de imagens, fotos de celular e fotos de eventos parecerem da mesma família. Coloque um gradiente com duas cores da marca sobre a foto e mude o modo de mesclagem. O modo de mesclagem decide como a cor se mistura com a imagem, e ele importa mais que as próprias cores.

| Modo de mesclagem | Efeito na foto | Combina com |
| --- | --- | --- |
| Normal | Cobre a foto na opacidade definida | Máscaras atrás de texto |
| Multiplicação | Escurece e tinge; os brancos ganham a cor da sobreposição | Fotos claras e arejadas |
| Tela | Clareia e tinge; os pretos ganham a cor da sobreposição | Fotos escuras e dramáticas |
| Cor | Mantém a luz e a sombra da foto, troca os matizes | Um tom forte e único da marca |
| Luz suave | Contraste e tom delicados | Lavagens sutis em retratos |

No CSS os modos se chamam `normal`, `multiply`, `screen`, `color` e `soft-light`; ferramentas em português costumam usar os nomes da tabela.

Lavagem violeta a coral: `linear-gradient(135deg, rgba(124, 58, 237, 0.7) 0%, rgba(236, 72, 153, 0.55) 55%, rgba(251, 146, 60, 0.45) 100%)`

Uma lavagem de três cores com opacidade decrescente. Em multiplicação sobre uma foto clara, parece um entardecer violeta quente; em tela sobre uma escura, ela brilha.

## Como adicionar uma sobreposição em gradiente a uma foto

1. **Defina para que serve a sobreposição** Texto, clima ou consistência. Uma máscara para texto, uma lavagem para clima e consistência. Se você não sabe dizer qual, provavelmente não precisa de nenhuma.
2. **Pegue um tom escuro da foto** Escolha a cor mais profunda que já existe na imagem para uma máscara, ou duas cores da marca para uma lavagem.
3. **Desenhe o gradiente sobre a área que precisa** Comece transparente sobre o assunto e vá escurecendo em direção à borda com o texto. Mantenha a transição longa para que nenhuma linha apareça.
4. **Escolha um modo de mesclagem** Normal para máscaras, multiplicação para fotos claras, tela para escuras, cor para um único tom.
5. **Baixe a opacidade até quase sumir** Depois suba um passo. As melhores sobreposições só são notadas quando você as desliga.
6. **Confira o texto no tamanho do celular** Reduza o design ao tamanho em que ele será visto e leia cada palavra. Um contraste que funciona no monitor pode falhar no celular; [contraste de cor](https://gradiently.design/pt-br/guide/color-contrast-accessibility) traz as metas a buscar.

## Quão escura deve ser uma sobreposição em gradiente

### Esconde a foto

- Uma camada preta chapada a 50 por cento sobre tudo
- A mesma sobreposição em toda imagem, seja qual for a luz
- Preto ou cinza puro que apaga pele e comida
- Uma borda dura onde o gradiente termina
- Sobreposição tão forte que a foto poderia ser qualquer coisa

### Tinge a foto

- Transparente sobre o assunto, mais escura só atrás do texto
- Intensidade ajustada para cada foto
- Um tom escuro tirado da imagem ou da marca
- Uma transição longa e gradual, sem linha
- A foto continua reconhecível num relance

Como limite prático, se a borda mais escura da máscara precisa passar de uns 80 por cento para o texto ficar legível, a foto está movimentada demais naquele ponto. Mude o texto de lugar, corte de outro jeito ou escolha uma imagem mais calma. Uma lavagem sobre a imagem inteira precisa de muito menos, senão a foto deixa de parecer foto.

## Sobreposições em gradiente num site

Na web você pode empilhar a sobreposição e a foto numa única declaração, o que mantém as duas juntas quando a imagem muda. A sobreposição vem primeiro porque o CSS pinta a primeira camada por cima. O conjunto completo de técnicas, incluindo modos de mesclagem e pseudoelementos, está em [sobreposição em gradiente no CSS](https://gradiently.design/pt-br/guide/css-gradient-overlay).

```css
.hero {
  min-height: 70vh;
  background-image:
    linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}
```

Uma máscara inferior sobre uma foto de hero. Troque a imagem e a sobreposição continua.

## Uma lavagem que combina com a sua marca sempre

As sobreposições se desencontram quando cada designer escolhe as próprias cores. No Studio do Gradiently, as fotos podem ser tingidas com as cores do seu Mark em mono, duotone ou lavagem, então imagens de fontes diferentes compartilham uma paleta sem ajuste manual. E quando o texto fica sobre um Mark em vez de uma foto, ele acalma sozinho a área atrás do texto, sem sobreposição nenhuma. Leia [fotos duotone nas cores do seu Mark](https://gradiently.design/pt-br/guide/photo-duotone-in-mark-colours) para ver como a lavagem funciona.

Um post de imóvel em que o título Acabou de entrar fica sobre a parte mais movimentada do fundo

Sem ajuda, a cor mais movimentada passa direto pelo título.

O mesmo post de imóvel com uma área mais calma e profunda atrás do título, deixando cada linha legível

Com o Mark reagindo, a área atrás do texto se acalma, o trabalho que uma máscara costuma fazer.

## FAQ

### O que é uma sobreposição em gradiente?

Uma camada de cor que se apaga sobre uma imagem, colocada por cima para tingi-la, criar um clima ou facilitar a leitura do texto. Ela difere de uma sobreposição chapada porque sua intensidade muda ao longo da imagem.

### Qual opacidade usar numa sobreposição de foto?

O mínimo que deixe o texto legível: muitas vezes de 50 a 80 por cento na borda mais escura de uma máscara, e bem menos numa lavagem sobre a foto inteira. Se precisar de mais, a foto provavelmente está movimentada demais naquele ponto.

### Qual modo de mesclagem é melhor para uma sobreposição de cor?

Multiplicação combina com fotos claras, tela com fotos escuras, e cor troca os matizes da foto mantendo a luz e a sombra. Use normal para máscaras atrás de texto.

### Devo usar preto numa sobreposição em gradiente?

Geralmente não. Um tom profundo tirado da foto, como um azul-marinho ou marrom escuro, escurece a imagem sem deixá-la apagada.

### Como adicionar uma sobreposição em gradiente no CSS?

Liste o gradiente primeiro e a imagem depois em `background-image`, por exemplo `linear-gradient(...), url(photo.jpg)`. A primeira camada é pintada por cima.