---
title: <blend-mode>
slug: Web/CSS/blend-mode
translation_of: Web/CSS/blend-mode
---
<div>{{CSSRef}}</div>

<p><a href="/pt-BR/docs/Web/CSS/CSS_Tipos">O tipo básico de dados</a> <a href="/pt-BR/docs/Web/CSS">CSS</a> <strong><code>&lt;blend-mode&gt;</code></strong> (modo de mesclagem) descreve como as cores devem aparecer, quando objetos se sobrepõem. Usa-se nas propriedades {{cssxref("background-blend-mode")}} e {{cssxref("mix-blend-mode")}}.</p>

<p>Para cada pixel sobreposto, o <code><strong>blend-mode</strong></code> 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.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<p>O tipo básico de dados <strong><code>&lt;blend-mode&gt;</code></strong> é definido usando uma palavra chave escolhida da lista abaixo.</p>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code><a id="normal" name="normal">normal</a></code></dt>
 <dd>
 <p>A cor firnal é a do pixel de cima, não importando a cor dor o pixel de baixo.<br>
  O efeito é como duas folhas de papel opacas se sobrepondo.</p>

 <div id="normal_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: normal;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('normal_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="multiply" name="multiply">multiply</a></code></dt>
 <dd>
 <p>A cor final é o resultado da multiplicação das cores de cima e de baixo.<br>
  Quando uma das camadas for preta, a cor final será preta, enquanto uma camada branca não altera a cor final.<br>
  O efeito é como duas imagens impressas sobrepostas em um filme transparente.</p>

 <div id="multiply_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: multiply;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('multiply_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="screen" name="screen">screen</a></code></dt>
 <dd>
 <p>A cor final é o resultado do inverso de cada cor, multiplicados um pelo outro e depois, o inverso desse resultado.<br>
  Uma camada preta não altera o resultado final, enquanto uma camada branca resulta na cor final branca.<br>
  O efeito é como o de duas imagens sobrepostas por um projetor, sobre uma tela de projeção.</p>

 <div id="screen_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: screen;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('screen_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="overlay" name="overlay">overlay</a></code></dt>
 <dd>A cor final será o resultado de <code>multiply</code>, se a cor de baixo for mais escura ou <code>screen</code>, se a cor de baixo for mais clara.<br>
 Este <code>blend-mode</code> é equivalente a <code>hard-light</code> mas com as camadas invertidas.
 <div id="overlay_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: overlay;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('overlay_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="darken" name="darken">darken</a></code></dt>
 <dd>
 <p>A cor final é composta pelos valores mais escuros dos canais de cores de cada uma das camadas.</p>

 <div id="darken_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: darken;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('darken_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="lighten" name="lighten">lighten</a></code></dt>
 <dd>A cor final é composta pelos valores mais claros de cada um dos canais de cores das camadas.</dd>
 <dd>
 <div id="lighten_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: lighten;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('lighten_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="color-dodge" name="color-dodge">color-dodge</a></code></dt>
 <dd>A cor final é o resultado da divisão da cor de baixo pelo inverso da cor de cima.<br>
 Um fundo preto não altera as cores. Uma cor de cima inversa a cor de baixo, resulta em uma cor bastante luminosa.<br>
 Este <code>blend-mode</code> é similar a <code>screen</code>, mas a cor de cima precisa ser apenas tão clara quanto o inverso da cor de fundo para deixar o resultado muito luminoso.</dd>
 <dd>
 <div id="color-dodge_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: color-dodge;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('color-dodge_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="color-burn" name="color-burn">color-burn</a></code></dt>
 <dd>
 <p>A cor final é o inverso da cor do fundo, dividido pelo valor da cor da frente e então inverte-se o resultado final.<br>
  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.<br>
  Este <code>blend-mode</code> é similar ao <code>multiply</code>, 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.</p>

 <div id="color-burn_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: color-burn;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('color-burn_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="hard-light" name="hard-light">hard-light</a></code></dt>
 <dd>
 <p>A cor final é o resultado do <code>multiply</code> se a cor de cima for a mais escura, ou o resultado de <code>screen</code> se a cor de cima for mais clara.<br>
  Este <code>blend-mode</code> é equivalente ao <code>overlay</code> mas com as camadas invertidas.<br>
  O efeito é o de iluminar o fundo com um holofote muito forte e intenso.</p>

 <div id="hard-light_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: hard-light;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('hard-light_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="soft-light" name="soft-light">soft-light</a></code></dt>
 <dd>
 <p>O resultado final é similar ao de <code>hard-light</code>, porém menos intenso.<br>
  O efeito é o de iluminar o fundo com um holofote difuso.</p>

 <div id="soft-light_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: soft-light;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('soft-light_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="difference" name="difference">difference</a></code></dt>
 <dd>
 <p>The final color is the result of subtracting the darker of the two colors from the lighter one.<br>
  A black layer has no effect, while a white layer inverts the other layer's color.</p>

 <div id="difference_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: difference;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('difference_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="exclusion" name="exclusion">exclusion</a></code></dt>
 <dd>
 <p>The final color is similar to <code>difference,</code> but with less contrast.<br>
  As with <code>difference</code>,  a black layer has no effect, while a white layer inverts the other layer's color.</p>

 <div id="exclusion_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: exclusion;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('exclusion_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="hue" name="hue">hue</a></code></dt>
 <dd>
 <p>The final color has the <em>hue</em> of the top color, while using the <em>saturation</em> and <em>luminosity</em> of the bottom color.</p>

 <div id="hue_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: hue;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('hue_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="saturation" name="saturation">saturation</a></code></dt>
 <dd>
 <p>The final color has the <em>saturation</em> of the top color, while using the <em>hue</em> and <em>luminosity</em> of the bottom color.<br>
  A pure gray backdrop, having no saturation, will have no effect.</p>

 <div id="saturation_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: saturation;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('saturation_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="color" name="color">color</a></code></dt>
 <dd>
 <p>The final color has the<em> <em>hue</em></em> and <em><em>saturation</em> </em>of the top color, while using the <em>luminosity</em> of the bottom color.<br>
  The effect preserves gray levels and can be used to colorize the foreground.</p>

 <div id="color_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: color;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('color_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="luminosity" name="luminosity">luminosity</a></code></dt>
 <dd>
 <p>The final color has the <em>luminosity</em> of the top color, while using the <em>hue</em> and <em>saturation</em> of the bottom color.<br>
  This blend mode is equivalent to <code>color</code>, but with the layers swapped.</p>

 <div id="luminosity_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: luminosity;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('luminosity_example', "300", "300") }}</p>
 </dd>
</dl>

<h2 id="Interpolation_of_blend_modes">Interpolation of blend modes</h2>

<p>Changes between blends mode are not interpolated. Any change occurs immediately.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;') }}</td>
   <td>{{ Spec2('Compositing') }}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Compatibility</h2>



<p>{{Compat("css.types.blend-mode")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>Properties that use this data type: {{cssxref("background-blend-mode")}}, {{cssxref("mix-blend-mode")}}</li>
 <li><a href="http://en.wikipedia.org/wiki/Blend_modes">Blend modes</a></li>
</ul>