# Sobreposições de gradiente: dá cor às fotos sem as esconder

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

Uma boa sobreposição muda o ambiente de uma foto e dá às tuas palavras onde assentar, sem esconder a imagem. Uma má transforma todas as imagens no mesmo retângulo turvo. Aqui ficam as diferenças.

## The short version

- Uma sobreposição de gradiente é uma camada de cor que se esbate sobre uma foto, usada para tingir a imagem, criar ambiente ou fazer uma zona mais calma para texto.
- A sobreposição mais comum é a sombra de proteção: transparente num dos lados e escura no outro, para só escurecer a parte da foto atrás das palavras.
- Uma sobreposição de lavagem de cor usa cores da marca com opacidade parcial, muitas vezes com um modo de mistura como multiplicar, ecrã ou cor, para a foto manter o pormenor.
- As sobreposições funcionam melhor quando cobrem só a zona que precisa de ajuda, em vez de escurecer a imagem toda por igual.
- Se uma sombra de proteção tem de passar de cerca de 80 por cento de opacidade no extremo mais escuro para o texto se ler, escolhe uma foto mais calma ou move as palavras.

Uma **sobreposição de gradiente** é uma camada de cor que se esbate sobre uma foto, colocada por cima para a tingir, unificar um conjunto de imagens ou tornar um título legível. O truque está no esbatido: uma parte da foto é muito tocada, o resto quase nada. É por isso que uma sobreposição de gradiente parece pensada, quando uma caixa preta lisa a 50 por cento parece um remendo. Tu escolhes onde a cor cai, quão forte fica e como se mistura com a imagem por baixo.

## Quatro tipos de sobreposição de gradiente

Quase todas as sobreposições que vês num site, cartaz ou publicação são de um de quatro tipos. Saber qual precisas poupa muita mexida em cursores de opacidade.

| Sobreposição | O que faz | Usa para |
| --- | --- | --- |
| Sombra de proteção | De transparente a escuro ao longo de uma margem | Títulos e legendas em fotos confusas |
| Lavagem de cor | Cores da marca com força parcial sobre a imagem toda | Fazer fotos sem relação parecerem um conjunto |
| Duotone ou mapa de gradiente | Substitui as cores da foto por duas ou mais das tuas | Aspetos fortes e gráficos; vê [o efeito duotone](https://gradiently.design/pt-pt/guide/duotone-effect) |
| Vinheta | Escurece os cantos com um esbatido radial | Puxar o olhar para o centro |

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

## A sombra de proteção: uma sobreposição para texto

Uma sombra de proteção é o cavalo de trabalho. Começa totalmente transparente e escurece em direção à margem onde estão as tuas palavras, normalmente em baixo ou à esquerda. A foto fica intocada onde está o assunto, e o texto ganha um chão calmo e escuro. Usa um tom escuro da própria foto em vez de preto puro: um castanho profundo sobre um interior quente, um azul-marinho sobre uma marinha. O preto puro parece uma mancha.

- Sombra em baixo, azul-marinho: `linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.5) 75%, rgba(10, 12, 20, 0.8) 100%)`
- Sombra à esquerda, castanho 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 por baixo. Cada uma fica limpa onde estaria o assunto.

Os 40 por cento de cima da sombra em baixo estão totalmente limpos, o que mantém rostos e produtos brilhantes. A escuridão cresce pela metade de baixo e atinge o máximo mesmo na margem, exatamente onde fica uma legenda. Para mais formas de manter as palavras legíveis sobre imagens, lê [texto legível sobre fotografias](https://gradiently.design/pt-pt/guide/readable-text-on-photos).

## Sobreposições de lavagem de cor e modos de mistura

Uma lavagem de cor é como as marcas fazem fotos de banco de imagens, instantâneos de telemóvel e imagens de eventos parecerem uma só família. Coloca um gradiente de duas cores da marca sobre a foto e muda o modo de mistura. O modo de mistura decide como a cor se mistura com a imagem, e importa mais do que as cores.

| Modo de mistura | Efeito na foto | Bom com |
| --- | --- | --- |
| Normal | Cobre a foto com a opacidade que definires | Sombras de proteção atrás de texto |
| Multiplicar | Escurece e tinge; os brancos assumem a cor da sobreposição | Fotos claras e arejadas |
| Ecrã | Aclara e tinge; os pretos assumem a cor da sobreposição | Fotos escuras e intensas |
| Cor | Mantém a luz e a sombra da foto e troca os matizes | Um tom único e forte da marca |
| Luz suave | Contraste e tom delicados | Lavagens subtis em retratos |

Os modos de mistura têm os mesmos nomes em CSS, Figma, Photoshop e na maioria das ferramentas de design.

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 multiplicar sobre uma foto pálida, lê-se como um crepúsculo violeta quente; em ecrã sobre uma foto escura, brilha.

## Como acrescentar uma sobreposição de gradiente a uma foto

1. **Decide para que serve a sobreposição** Texto, ambiente ou consistência. Uma sombra de proteção para texto, uma lavagem para ambiente e consistência. Se não sabes dizer qual, provavelmente não precisas de nenhuma.
2. **Recolhe um tom escuro da foto** Escolhe a cor mais profunda que já está na imagem para uma sombra de proteção, ou duas cores da marca para uma lavagem.
3. **Desenha o gradiente sobre a zona que precisa** Começa limpo sobre o assunto e constrói em direção à margem com as palavras. Mantém o esbatido longo para não haver uma linha visível.
4. **Escolhe um modo de mistura** Normal para sombras de proteção, multiplicar para fotos claras, ecrã para escuras, cor para um tom único.
5. **Baixa a opacidade até quase desaparecer** Depois sobe-a de volta um passo. As melhores sobreposições só se notam quando as desligas.
6. **Verifica o texto ao tamanho do telemóvel** Encolhe o design ao tamanho em que será visto e lê todas as palavras. O contraste que funciona num monitor pode falhar num telemóvel; [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) tem os valores a atingir.

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

### Esconde a foto

- Uma camada preta lisa a 50 por cento sobre tudo
- A mesma sobreposição em todas as imagens, seja qual for a luz
- Preto puro ou cinzento que apaga pele e comida
- Uma aresta dura onde o gradiente pára
- Sobreposição tão forte que a foto podia ser qualquer uma

### Tinge a foto

- Limpa sobre o assunto, mais escura só atrás das palavras
- Intensidade ajustada a cada foto
- Um tom escuro tirado da imagem ou da marca
- Um esbatido longo e gradual, sem linha
- A foto ainda reconhecível à primeira vista

Como limite de trabalho, se o extremo mais escuro de uma sombra de proteção tem de passar de cerca de 80 por cento para o texto se ler, a foto está demasiado carregada para aquele sítio. Move as palavras, corta de outra forma ou escolhe uma imagem mais calma. Uma lavagem sobre a imagem toda precisa de muito menos, ou a foto deixa de parecer uma foto.

## Sobreposições de gradiente num website

Na web podes empilhar a sobreposição e a foto numa só declaração, o que as mantém 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 mistura e pseudoelementos, está em [sobreposição de gradiente em CSS](https://gradiently.design/pt-pt/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 sombra de proteção em baixo sobre uma foto de hero. Muda a imagem e a sobreposição fica.

## Uma lavagem que condiz sempre com a tua marca

As sobreposições desviam-se quando cada designer escolhe as suas cores. No Studio do Gradiently, as fotos podem ser tingidas nas cores do teu Mark, em mono, duotone ou lavagem, para que imagens de origens diferentes partilhem uma paleta sem acertos manuais. E quando as palavras assentam num Mark e não numa foto, ele acalma sozinho a zona atrás delas, sem qualquer sobreposição. Lê [fotos duotone nas cores do teu Mark](https://gradiently.design/pt-pt/guide/photo-duotone-in-mark-colours) para perceberes como funciona a lavagem.

Uma publicação imobiliária em que o título Acabou de entrar assenta na parte mais carregada do fundo

Sem ajuda, a cor mais carregada atravessa diretamente o título.

A mesma publicação imobiliária com uma zona mais calma e profunda atrás do título para que todas as linhas se leiam

Com o Mark a responder, a zona atrás das palavras acalma, o trabalho que uma sombra de proteção costuma fazer.

## FAQ

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

Uma camada de cor que se esbate sobre uma imagem, colocada por cima para a tingir, criar ambiente ou tornar o texto mais fácil de ler. Difere de uma sobreposição lisa porque a sua força muda ao longo da imagem.

### Que opacidade deve ter a sobreposição de uma foto?

A mínima que torne o texto legível: muitas vezes 50 a 80 por cento no extremo mais escuro de uma sombra de proteção, e muito menos para uma lavagem sobre a foto inteira. Se precisares de mais, a foto provavelmente está demasiado carregada para aquele sítio.

### Que modo de mistura é melhor para uma sobreposição de cor?

Multiplicar serve fotos claras, ecrã serve as escuras, e cor troca os matizes da foto mantendo a sua luz e sombra. Usa normal para sombras de proteção atrás de texto.

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

Normalmente não. Um tom profundo recolhido da foto, como um azul-marinho ou castanho escuro, escurece a imagem sem a deixar baça.

### Como acrescento uma sobreposição de gradiente em CSS?

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