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

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.

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

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 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.

<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>

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

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 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>.

/* 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;
}

A técnica completa, incluindo como escolher as duas cores, está em o efeito duotone.

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. 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. 2

   Aponte o gradiente para elas

   Use to top para texto embaixo, to right para texto à esquerda ou um radial centrado nas palavras.

3. 3

   Pare cedo

   Chegue à transparência total entre 60 e 70 por cento para que a maior parte da foto fique intacta.

4. 4

   Confira o pior caso

   Meça o contraste onde a foto é mais clara atrás de uma letra. Contraste de cor e acessibilidade 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.

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.