<blend-mode>
============

O tipo básico de dados CSS **`<blend-mode>`** (modo de mesclagem) descreve como as cores devem aparecer, quando objetos se sobrepõem. Usa-se nas propriedades `background-blend-mode` e `mix-blend-mode`.

Para cada pixel sobreposto, o **`blend-mode`** obtém o valor da cor do pixel da frente e do pixel do fundo, faz um cálculo com esses valores e devolve um novo valor de cor.

Syntaxe
-------

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

### Valores

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


Interpolation of blend modes
----------------------------

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

Specifications
--------------

| Specification |
| --- |
| Compositing and Blending Level 2 # ltblendmodegt |

Browser Compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

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