<blend-mode>

O tipo básico de dados <blend-mode> é definido usando uma palavra chave escolhida da lista abaixo.

normal

A cor firnal é a do pixel de cima, não importando a cor dor o pixel de baixo. O efeito é como duas folhas de papel opacas se sobrepondo.

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: normal;
}

multiply

A cor final é o resultado da multiplicação das cores de cima e de baixo. Quando uma das camadas for preta, a cor final será preta, enquanto uma camada branca não altera a cor final. O efeito é como duas imagens impressas sobrepostas em um filme transparente.

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: multiply;
}

screen

A cor final é o resultado do inverso de cada cor, multiplicados um pelo outro e depois, o inverso desse resultado. Uma camada preta não altera o resultado final, enquanto uma camada branca resulta na cor final branca. O efeito é como o de duas imagens sobrepostas por um projetor, sobre uma tela de projeção.

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}

overlay

A cor final será o resultado de multiply, se a cor de baixo for mais escura ou screen, se a cor de baixo for mais clara. Este blend-mode é equivalente a hard-light mas com as camadas invertidas.

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: overlay;
}

darken

A cor final é composta pelos valores mais escuros dos canais de cores de cada uma das camadas.

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: darken;
}

lighten

A cor final é composta pelos valores mais claros de cada um dos canais de cores das camadas.

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: lighten;
}

color-dodge

A cor final é o resultado da divisão da cor de baixo pelo inverso da cor de cima. Um fundo preto não altera as cores. Uma cor de cima inversa a cor de baixo, resulta em uma cor bastante luminosa. Este blend-mode é similar a screen, mas a cor de cima precisa ser apenas tão clara quanto o inverso da cor de fundo para deixar o resultado muito luminoso.

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-dodge;
}

color-burn

A cor final é o inverso da cor do fundo, dividido pelo valor da cor da frente e então inverte-se o resultado final. Se a cor de cima for branca, não haverá alteração. Se a cor de cima for o inverso da cor de baixo, resultará em uma cor preta. Este blend-mode é similar ao multiply, mas a cor de cima precisa apenas ser tão escura quanto o inverso da cor de baixo para fazer o resultado final ser preto.

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-burn;
}

hard-light

A cor final é o resultado do multiply se a cor de cima for a mais escura, ou o resultado de screen se a cor de cima for mais clara. Este blend-mode é equivalente ao overlay mas com as camadas invertidas. O efeito é o de iluminar o fundo com um holofote muito forte e intenso.

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hard-light;
}

soft-light

O resultado final é similar ao de hard-light, porém menos intenso. O efeito é o de iluminar o fundo com um holofote difuso.

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: soft-light;
}

difference

The final color is the result of subtracting the darker of the two colors from the lighter one. A black layer has no effect, while a white layer inverts the other layer's color.

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: difference;
}

exclusion

The final color is similar to difference, but with less contrast. As with difference, a black layer has no effect, while a white layer inverts the other layer's color.

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: exclusion;
}

hue

The final color has the hue of the top color, while using the saturation and luminosity of the bottom color.

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hue;
}

saturation

The final color has the saturation of the top color, while using the hue and luminosity of the bottom color. A pure gray backdrop, having no saturation, will have no effect.

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: saturation;
}

color

The final color has the hue and saturation of the top color, while using the luminosity of the bottom color. The effect preserves gray levels and can be used to colorize the foreground.

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color;
}

luminosity

The final color has the luminosity of the top color, while using the hue and saturation of the bottom color. This blend mode is equivalent to color, but with the layers swapped.

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: luminosity;
}

Changes between blends mode are not interpolated. Any change occurs immediately.

• Properties that use this data type: background-blend-mode, mix-blend-mode
• Blend modes