# Tingir imagens com blend modes

> Escolha uma cor, troque entre os 16 modos de mistura e veja a foto tingida, com o CSS pronto em mix-blend-mode ou background-blend-mode.

URL: https://dpw.dev/ferramentas/tingir-imagens-blend-mode/

Escolha a cor e vá trocando o modo de mistura: a foto da prévia mostra cada um dos 16 modos do CSS agindo sobre ela. Leve o código para uma foto num `<img>` ou no `background`.

Esta página tem uma prévia interativa no navegador. Exemplo: uma foto num `<img>` tingida de `#2563eb` com `multiply`:

```css
/* <div class="media"><img src="foto.webp" alt="…"></div> */
.media {
  /* A mistura fica dentro da .media e não pega o fundo da página. */
  isolation: isolate;
  position: relative;
}

.media img {
  display: block;
  inline-size: 100%;
}

/* A cor por cima da foto, misturada com ela. */
.media::after {
  background: #2563eb;
  content: "";
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
}
```

| Modo | O que faz com a foto |
| --- | --- |
| `normal` | cobre |
| `multiply` | escurece |
| `darken` | escurece |
| `color-burn` | escurece |
| `screen` | clareia |
| `lighten` | clareia |
| `color-dodge` | clareia |
| `overlay` | contrasta |
| `soft-light` | contrasta |
| `hard-light` | contrasta |
| `difference` | inverte |
| `exclusion` | inverte |
| `hue` | matiz |
| `saturation` | saturação |
| `color` | tinge |
| `luminosity` | luz |

## O problema

Foto com a cor da marca por cima é um recurso comum em banners, cards e capas. Uma camada de cor com opacidade só deixa a foto lavada, e editar cada imagem num editor não acompanha a troca de tema nem a foto nova que o cliente mandou.

O CSS mistura a cor com a foto do mesmo jeito que os editores de imagem, com os mesmos 16 modos. Mas os nomes (`multiply`, `soft-light`, `color-burn`) dizem pouco sozinhos, e o resultado muda com a cor e com a foto.

## Como funciona

Cada modo é uma conta feita canal a canal entre a cor de cima (a que tinge) e a foto de baixo, com os valores de 0 a 1:

`multiply = cor × foto · screen = 1 − (1 − cor) × (1 − foto)`

Multiplicar dois números entre 0 e 1 nunca dá mais que nenhum deles: por isso `multiply` só escurece, e o branco da foto vira a cor. O `screen` faz a mesma conta com as cores invertidas e só clareia: o preto da foto vira a cor.

Os modos se agrupam pelo que fazem com a foto. `multiply`, `darken` e `color-burn` escurecem; `screen`, `lighten` e `color-dodge` clareiam; `overlay`, `soft-light` e `hard-light` escurecem o escuro e clareiam o claro, o que aumenta o contraste. `difference` e `exclusion` invertem as cores. `hue`, `saturation`, `color` e `luminosity` trocam um componente da foto pelo da cor: o `color` mantém a luz da foto e pinta tudo com o matiz e a saturação da cor, o tingimento mais fiel.

Com a foto num `<img>`, um `::after` posicionado por cima leva a cor e o `mix-blend-mode`. O `isolation: isolate` no elemento de fora limita a mistura à foto: sem ele, a cor também se misturaria com o fundo da página.

Com a foto no `background`, a cor vira uma camada de imagem (`linear-gradient()` de uma cor só) acima da foto, e o `background-blend-mode` mistura as duas. A ordem importa: na lista do `background`, a primeira camada fica por cima.

A intensidade é a opacidade da cor: abaixo de 100%, a mistura se soma à foto original na mesma proporção.

## Quando usar

- Banners e capas com a foto na cor da marca, que acompanham a troca de tema.
- Grades de fotos de origens diferentes que precisam parecer da mesma família.
- Fundo de foto escurecido o bastante para o texto por cima ter contraste, com `multiply`.
- Efeito de hover que tinge a foto e some ao passar o mouse, trocando só a cor ou o modo.

Suporte: funciona em todos os navegadores atuais ([Baseline](https://webstatus.dev/features/mix-blend-mode)).

## Conceitos Fundamentais de CSS

O `isolation` funciona porque cria um contexto de empilhamento, o mesmo mecanismo do `z-index`. O livro explica como o navegador empilha e pinta as camadas em 237 páginas sobre como o CSS funciona por dentro. [Conheça o livro](https://dpw.dev/livro-conceitos-fundamentais-css/?utm_source=blog&utm_medium=cta_ferramentas)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml