Propriedade CSS mix-blend-mode

A propriedade CSS mix-blend-mode controla como o conteúdo de um elemento se mescla com o conteúdo atrás dele — geralmente o background-color, o background-image do elemento pai ou outro elemento sobreposto. Em vez de uma camada simplesmente cobrir a outra, o navegador combina os pixels usando uma fórmula matemática (multiply, screen, difference, entre outros), da mesma forma que os modos de mesclagem funcionam no Photoshop.

Esta página aborda o que cada modo de mesclagem faz, quando o contexto de empilhamento importa e exemplos executáveis para os valores mais úteis.

Como a mesclagem funciona

Para que a mesclagem seja visível, é necessário que duas camadas se sobreponham — por exemplo, um <img> sobre uma <div> colorida. O modo de mesclagem então combina os pixels do primeiro plano com os pixels do plano de fundo:

multiply escurece — o branco no primeiro plano desaparece, as áreas escuras permanecem. Bom para sombras e tingimento.
screen clareia — o preto desaparece, as áreas claras permanecem. O inverso de multiply.
overlay combina os dois: escurece as áreas escuras e clareia as áreas claras, aumentando o contraste.
difference / exclusion subtraem cores, produzindo efeitos invertidos e de alto contraste.
hue, saturation, color, luminosity mesclam um canal do primeiro plano (seu matiz, saturação etc.) com o restante do plano de fundo — útil para recolorir imagens.

Há 16 modos de mesclagem no total (listados na tabela Valores abaixo).

Contexto de empilhamento e isolamento

Definir qualquer valor diferente de normal cria um novo contexto de empilhamento no elemento. O elemento se mescla apenas com o conteúdo dentro desse contexto de empilhamento — não se mesclará com nada fora dele. Isso é o que impede que um elemento mesclado afete toda a página.

Por causa disso, qualquer propriedade que estabeleça um contexto de empilhamento (como opacity abaixo de 1, transform ou position com z-index) pode alterar o resultado da mesclagem. Para interromper deliberadamente a mesclagem de um elemento com o que está atrás dele, atribua a um ancestral a propriedade isolation: isolate — isso cria um novo contexto de empilhamento para que a mesclagem fique contida.

Dica

Se você quiser mesclar as imagens de plano de fundo de um elemento entre si, pode usar a propriedade background-blend-mode.

Valor inicial	normal
Aplica-se a	Todos os elementos.
Herdada	Não.
Animável	Não.
Versão	CSS1
Sintaxe DOM	object.style.mixBlendMode = "exclusion";

Sintaxe

Sintaxe da propriedade CSS mix-blend-mode

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity | initial | inherit;

Exemplo da propriedade mix-blend-mode:

Exemplo da propriedade CSS mix-blend-mode com o valor multiply

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: multiply;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: multiply</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade mix-blend-mode com o valor "screen":

Exemplo da propriedade CSS mix-blend-mode com o valor screen

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: screen;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: screen</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade mix-blend-mode com o valor "color-dodge":

Exemplo da propriedade CSS mix-blend-mode com o valor color-dodge

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: color-dodge;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: color-dodge</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade mix-blend-mode com o valor "hue":

Exemplo da propriedade CSS mix-blend-mode com o valor hue

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: hue;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: hue</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade mix-blend-mode com o valor "normal":

Propriedade CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 500px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: normal;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: normal</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade mix-blend-mode com o valor "hard-light":

Propriedade CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: hard-light;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: hard-light</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade mix-blend-mode com o valor "difference":

Propriedade CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: difference;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: difference</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição
normal	Sem mesclagem — o elemento é renderizado normalmente sobre o plano de fundo. Este é o valor padrão.
multiply	Multiplica as cores; o resultado é sempre mais escuro. O branco não tem efeito, o preto permanece preto.
screen	Inverte, multiplica e inverte novamente; o resultado é sempre mais claro. O oposto de `multiply`.
overlay	`multiply` nas áreas escuras e `screen` nas áreas claras — aumenta o contraste.
darken	Mantém a cor mais escura entre as duas para cada canal.
lighten	Mantém a cor mais clara entre as duas para cada canal.
color-dodge	Clareia o plano de fundo para refletir a cor do primeiro plano.
color-burn	Escurece o plano de fundo para refletir a cor do primeiro plano.
hard-light	Como `overlay`, mas com as camadas invertidas — um efeito de holofote intenso.
soft-light	Uma versão mais suave de `hard-light`, como um holofote difuso.
difference	Subtrai a cor mais escura da mais clara; cores iguais produzem preto.
exclusion	Similar a `difference`, mas com menor contraste.
hue	Matiz do primeiro plano com a saturação e luminosidade do plano de fundo.
saturation	Saturação do primeiro plano com o matiz e luminosidade do plano de fundo.
color	Matiz e saturação do primeiro plano com a luminosidade do plano de fundo — recolore mantendo os detalhes.
luminosity	Luminosidade do primeiro plano com o matiz e saturação do plano de fundo.
initial	Define a propriedade com seu valor padrão (`normal`).
inherit	Herda o valor do elemento pai.

Propriedades relacionadas

background-blend-mode — mescla as próprias camadas de plano de fundo de um elemento (imagens e cor) entre si, em vez de com o que está atrás do elemento.
isolation — cria um contexto de empilhamento para que uma mesclagem fique contida.
opacity e filter — outras formas de alterar como um elemento é composto.

Prática

O que acontece quando você define mix-blend-mode com qualquer valor diferente de 'normal'?

Um novo contexto de empilhamento é criado no elementoO elemento também se mescla com o conteúdo fora do seu contexto de empilhamentoAs imagens de plano de fundo do elemento se mesclam entre siNada muda, a menos que a opacidade também seja definida

Prática

Qual modo de mesclagem sempre produz um resultado mais escuro, onde o branco no primeiro plano não tem efeito?

multiplyscreennormalluminosity