Propriedade CSS background-blend-mode

A propriedade CSS background-blend-mode define como as imagens de fundo de um elemento se mesclam entre si e com a background-color do elemento. Ela permite combinar fundos em camadas da mesma forma que editores de imagem mesclam layers — tingindo uma foto, criando um efeito duotone, ou fundindo uma textura em outra — sem modificar os arquivos de imagem.

Esta página explica o que cada modo de mesclagem faz, como a mesclagem funciona quando um elemento possui várias camadas de fundo, casos de uso reais e exemplos executáveis. O valor padrão é normal, o que significa sem mesclagem.

Referência da propriedade


Valor Inicial	`normal`
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter e ::first-line.
Herdado	Não
Animável	Não
Versão	CSS3
Sintaxe DOM	`object.style.backgroundBlendMode = "luminosity"`

Sintaxe

background-blend-mode: <blend-mode>;

/* Multiple layers */
background-blend-mode: <blend-mode>, <blend-mode>, ...;

Onde <blend-mode> é um dos seguintes:

normal | multiply | screen | overlay | darken | lighten |
color-dodge | color-burn | hard-light | soft-light |
difference | exclusion | hue | saturation | color | luminosity

Como funciona a mesclagem em camadas

Um elemento pode empilhar várias camadas de fundo: a lista de background-image, mais a background-color aplicada abaixo de todas elas. background-blend-mode aceita uma lista separada por vírgulas de modos que correspondem, em ordem, às camadas de background-image:

Se você fornecer menos modos do que camadas, a lista se repete desde o início até que cada camada tenha um modo.
Se você fornecer mais modos do que camadas, os modos extras são ignorados.
A background-color é sempre a camada mais inferior e se mescla com a camada de imagem diretamente acima dela.

/* Two images: the first uses "screen", the second "multiply" */
background-image: url(top.png), url(bottom.png);
background-blend-mode: screen, multiply;

A mesclagem ocorre apenas entre os fundos do mesmo elemento — ela não mescla com conteúdo visualmente atrás do elemento no contexto de empilhamento. Para mesclar um elemento com o que está abaixo dele na página, use mix-blend-mode.

Valores

Valor	O que faz
`normal`	Sem mesclagem — a camada superior pinta sobre as camadas abaixo (padrão).
`multiply`	Multiplica os valores dos canais de cor. O resultado é sempre mais escuro; branco fica transparente, preto permanece preto.
`screen`	Inverso de `multiply`. O resultado é sempre mais claro; preto fica transparente, branco permanece branco.
`overlay`	Aplica `multiply` onde a camada inferior é escura e `screen` onde é clara — aumenta o contraste.
`darken`	Mantém o pixel mais escuro, canal por canal.
`lighten`	Mantém o pixel mais claro, canal por canal.
`color-dodge`	Clareia a camada inferior para refletir a camada superior, produzindo destaques vívidos.
`color-burn`	Escurece a camada inferior para refletir a camada superior, intensificando as sombras.
`hard-light`	Como `overlay`, mas com os papéis da camada superior e inferior invertidos — um forte aumento de contraste.
`soft-light`	Uma versão mais suave de `overlay`; preserva os meios-tons, evita bordas duras.
`difference`	Subtrai a cor mais escura da mais clara por canal. Cores idênticas produzem preto.
`exclusion`	Semelhante a `difference`, mas com menor contraste; os meios-tons ficam cinza.
`hue`	Usa o matiz da camada superior, com a saturação e luminosidade da camada inferior.
`saturation`	Usa a saturação da camada superior, com o matiz e a luminosidade da camada inferior.
`color`	Usa o matiz e a saturação da camada superior com a luminosidade da camada inferior — a forma padrão de tingir uma foto em escala de cinza.
`luminosity`	Inverso de `color`: usa a luminosidade da camada superior com o matiz e a saturação da camada inferior.

Entendendo as famílias de modos de mesclagem

Os 16 modos se dividem em quatro famílias:

Modos de escurecimento (multiply, darken, color-burn) — o resultado nunca é mais brilhante do que qualquer uma das fontes. Úteis para sombras, aprofundamento de sombras e adição de tintas escuras.

Modos de clareamento (screen, lighten, color-dodge) — o resultado nunca é mais escuro do que qualquer uma das fontes. Úteis para brilhos, vazamentos de luz e efeitos de clareamento.

Modos de contraste (overlay, hard-light, soft-light) — escurecem áreas escuras enquanto clareiam áreas claras, aumentando o contraste geral. O soft-light é o mais sutil; o hard-light é o mais agressivo.

Modos de diferença/exclusão (difference, exclusion) — produzem resultados invertidos ou psicodélicos. Usados principalmente para efeitos criativos ou animações; menos comuns em UI.

Modos de componente (hue, saturation, color, luminosity) — dividem uma cor em seus componentes HSL e trocam canais individuais entre camadas. São os mais indicados para recolorir fotos.

Exemplos

normal

Sem mesclagem — a imagem frontal é desenhada sobre a imagem de fundo sem interação entre elas.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: normal;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

screen

Áreas claras permanecem brilhantes; áreas escuras na imagem superior ficam transparentes, revelando a camada abaixo. Bom para adicionar brilhos ou vazamentos de luz suaves.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: screen;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

color-dodge

Clareia a camada inferior para refletir a camada superior. Produz resultados vívidos e de alto contraste. Útil para efeitos de néon ou reflexos.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: color-dodge;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

multiply

Multiplica os valores dos canais de cor, sempre produzindo um resultado mais escuro do que qualquer uma das fontes. Áreas brancas ficam transparentes; áreas pretas permanecem pretas. A escolha clássica para adicionar tintas ou sombras a uma foto.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: multiply;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

overlay

Aumenta o contraste aplicando multiply onde a camada inferior é escura e screen onde é clara. Mantém o caráter tonal da camada inferior enquanto o destaca.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: overlay;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

darken

Compara cada canal de cor e mantém o valor mais escuro. As duas camadas competem pixel a pixel, e as partes mais escuras de qualquer camada sempre prevalecem.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: darken;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

saturation

Usa a saturação da camada superior enquanto preserva o matiz e a luminosidade da camada inferior. Útil para dessaturar ou ressaturar partes de uma foto mantendo a paleta de cores.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: saturation;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

Casos de uso comuns

Tingir uma foto com uma cor de marca

Coloque uma background-color sólida sobre uma foto e use multiply para direcionar a imagem em direção a esse matiz. Áreas escuras na foto absorvem a tinta com mais intensidade.

.hero {
  background-image: url(photo.jpg);
  background-color: #4f46e5; /* indigo brand color */
  background-blend-mode: multiply;
}

Criando um efeito duotone

Defina dois fundos com gradiente — um para destaques, outro para sombras — sobre uma imagem em escala de cinza usando screen e multiply:

.duotone {
  background-image:
    linear-gradient(#ff6b6b, #ff6b6b),  /* highlight color */
    linear-gradient(#4f46e5, #4f46e5),  /* shadow color */
    url(photo.jpg);
  background-blend-mode: screen, multiply, normal;
}

A foto em escala de cinza recebe uma camada de destaque quente (screen) e uma camada de sombra fria (multiply), produzindo o clássico visual de duas tonalidades, popular em seções hero.

Sobreposição de textura

Funda uma textura de ruído ou papel em uma cor de fundo sólida sem editar o arquivo:

.textured-card {
  background-image: url(noise.png);
  background-color: #f5f0eb;
  background-blend-mode: soft-light;
}

soft-light geralmente é a escolha mais suave — adiciona textura sem desbotar a cor base.

Recolorir interativamente ao passar o mouse

Altere o modo de mesclagem dinamicamente para criar um efeito de hover somente com CSS:

.card {
  background-image: url(photo.jpg);
  background-color: #10b981;
  background-blend-mode: normal;
  transition: background-blend-mode 0s; /* instant switch */
}

.card:hover {
  background-blend-mode: multiply;
}

Observação: background-blend-mode não é animável (sem estados intermediários), portanto as transições ocorrem de forma abrupta, sem interpolação.

Quando é necessário mesclar o elemento inteiro

background-blend-mode mescla apenas as camadas dentro do próprio fundo do elemento. Se você precisar mesclar um elemento com o conteúdo atrás dele na página — por exemplo, uma sobreposição de vidro fosco — use mix-blend-mode.

Para ajustes de imagem única (brilho, contraste, escala de cinza) em que você não precisa de uma segunda camada, a propriedade filter costuma ser uma solução mais simples, e opacity é a ferramenta certa para desvanecer o elemento inteiro.

Suporte dos navegadores

background-blend-mode é suportado em todos os navegadores modernos (Chrome, Firefox, Edge, Safari e Opera). O Internet Explorer nunca ofereceu suporte. Forneça um background simples e sensato como fallback para ambientes legados — fundos sem mesclagem renderizam as camadas empilhadas normalmente, sem nenhum erro visível.

/* Fallback first, then enhanced */
.hero {
  background: url(photo.jpg) center / cover #4f46e5;
}

@supports (background-blend-mode: multiply) {
  .hero {
    background-blend-mode: multiply;
  }
}

Prática

O que a propriedade CSS background-blend-mode faz?

Define o modo de mistura da imagem de fundo e da cor de fundo.Ajusta o tamanho da imagem de fundo.Controla a rolagem da imagem de fundo.Permite que múltiplas imagens de fundo se misturem entre si.Determina a posição da imagem de fundo.