<p>{{CSSRef}}</p>
<h2 id="Summary">Summary</h2>
<p>The <strong><code><blend-mode></code></strong> type is a collection of keywords describing blend modes.<br />
A blend mode is a method of calculating the final color value of a pixel when layers overlap.<br />
Each blend mode takes the color value of the foreground and the backdrop (top color and bottom color respectively), perfoms its calculation and returns a color value.<br />
The final, visible layer is the result of performing the blend mode calculation on every overlapping pixel among the blended layers.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">
Formal syntax: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity</pre>
<h3 id="Possible_values">Possible values</h3>
<dl>
<dt><code>normal</code></dt>
<dd>
<p>The final color is the top color, whatever the bottom color may be.<br />
The effect is similar to two opaque pieces of paper overlapping.</p>
<div id="normal">
<pre class="brush: html" style="display:none">
<div id="div"></div></pre>
<pre class="brush: css" style="display:none">
#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>
<p>{{ EmbedLiveSample('normal', "300", "300") }}</p>
</dd>
<dt><code>multiply</code></dt>
<dd>
<p>The final color is the result of multiplying the top and bottom colors.<br />
A black layer leads to a black final layer, and a white layer leads to no change.<br />
The effect is similar to two images printed on transparent film overlapping.</p>
<div id="multiply">
<pre class="brush: html" style="display:none">
<div id="div"></div></pre>
<pre class="brush: css" style="display:none">
#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>
<p>{{ EmbedLiveSample('multiply', "300", "300") }}</p>
</dd>
<dt><code>screen</code></dt>
<dd>
<p>The final color is the result of inverting the colors, multiplying them and inverting that color value.<br />
A black layer leads to no change, and a white layer leads to a white final layer.<br />
The effect is similar to two images shone onto a projection screen.</p>
<div id="screen">
<pre class="brush: html" style="display:none">
<div id="div"></div></pre>
<pre class="brush: css" style="display:none">
#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>
<p>{{ EmbedLiveSample('screen', "300", "300") }}</p>
</dd>
<dt><code>overlay</code></dt>
<dd>The final color is the result of <code>multiply</code> if the bottom color is darker, or <code>screen</code> if the bottom color is lighter.<br />
This blend mode is equivalent to <code>hard-light</code> but with the layers swapped.
<div id="overlay">
<pre class="brush: html" style="display:none">
<div id="div"></div></pre>
<pre class="brush: css" style="display:none">
#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>
<p>{{ EmbedLiveSample('overlay', "300", "300") }}</p>
</dd>
<dt><code>darken</code></dt>
<dd>
<p>The final color is a color composed of the darkest values per color channel.</p>
<div id="darken">
<pre class="brush: html" style="display:none">
<div id="div"></div></pre>
<pre class="brush: css" style="display:none">
#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>
<p>{{ EmbedLiveSample('darken', "300", "300") }}</p>
</dd>
<dt><code>lighten</code></dt>
<dd>
<p>The final color is a color composed of the lightest values per color channel.</p>
<div id="lighten">
<pre class="brush: html" style="display:none">
<div id="div"></div></pre>
<pre class="brush: css" style="display:none">
#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>
<p>{{ EmbedLiveSample('lighten', "300", "300") }}</p>
</dd>
<dt><code>color-dodge</code></dt>
<dd>
<p>The final color is the result of dividing the bottom color by the inverse of the top color.<br />
A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color.<br />
This blend mode is similar to screen, but the foreground need only be as light as the inverse of the backdrop to reach a fully lit color.</p>
<div id="color-dodge">
<pre class="brush: html" style="display:none">
<div id="div"></div></pre>
<pre class="brush: css" style="display:none">
#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>
<p>{{ EmbedLiveSample('color-dodge', "300", "300") }}</p>
</dd>
<dt><code>color-burn</code></dt>
<dd>
<p>This final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value.<br />
A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image.<br />
This blend mode is similar to multiply, but the foreground need only be as dark as the inverse of the backdrop to make the final image black.</p>
<div id="color-burn">
<pre class="brush: html" style="display:none">
<div id="div"></div></pre>
<pre class="brush: css" style="display:none">
#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>
<p>{{ EmbedLiveSample('color-burn', "300", "300") }}</p>
</dd>
<dt><code>hard-light</code></dt>
<dd>
<p>The final color is the result of <code>multiply</code> if the top color is darker, or <code>screen</code> if the top color is lighter.<br />
This blend mode is equivalent to <code>overlay</code> but with the layers swapped.<br />
The effect is similar to shining a <em>harsh</em> spotlight on the backdrop.</p>
<div id="hard-light">
<pre class="brush: html" style="display:none">
<div id="div"></div></pre>
<pre class="brush: css" style="display:none">
#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>
<p>{{ EmbedLiveSample('hard-light', "300", "300") }}</p>
</dd>
<dt><code>soft-light</code></dt>
<dd>
<p>The final color is similar to hard-light, but softer.<br />
This blend mode behaves similar to <code>hard-light</code>.<br />
The effect is similar to shining a <em>diffused</em> spotlight on the backdrop<em><code>.</code></em></p>
<div id="soft-light">
<pre class="brush: html" style="display:none">
<div id="div"></div></pre>
<pre class="brush: css" style="display:none">
#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>
<p>{{ EmbedLiveSample('soft-light', "300", "300") }}</p>
</dd>
<dt><code>difference</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">
<pre class="brush: html" style="display:none">
<div id="div"></div></pre>
<pre class="brush: css" style="display:none">
#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>
<p>{{ EmbedLiveSample('difference', "300", "300") }}</p>
</dd>
<dt><code>exclusion</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">
<pre class="brush: html" style="display:none">
<div id="div"></div></pre>
<pre class="brush: css" style="display:none">
#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>
<p>{{ EmbedLiveSample('exclusion', "300", "300") }}</p>
</dd>
<dt><code>hue</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">
<pre class="brush: html" style="display:none">
<div id="div"></div></pre>
<pre class="brush: css" style="display:none">
#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>
<p>{{ EmbedLiveSample('hue', "300", "300") }}</p>
</dd>
<dt><code>saturation</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">
<pre class="brush: html" style="display:none">
<div id="div"></div></pre>
<pre class="brush: css" style="display:none">
#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>
<p>{{ EmbedLiveSample('saturation', "300", "300") }}</p>
</dd>
<dt><code>color</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">
<pre class="brush: html" style="display:none">
<div id="div"></div></pre>
<pre class="brush: css" style="display:none">
#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>
<p>{{ EmbedLiveSample('color', "300", "300") }}</p>
</dd>
<dt><code>luminosity</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 color, but with the layers swapped.</p>
<div id="luminosity">
<pre class="brush: html" style="display:none">
<div id="div"></div></pre>
<pre class="brush: css" style="display:none">
#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>
<p>{{ EmbedLiveSample('luminosity', "300", "300") }}</p>
</dd>
</dl>
<h2 id="Interpolation_of_blend_modes">Interpolation of Blend modes</h2>
<div> </div>
<p>Changes between blends mode are not interpolated. Any change occurs abruptly.</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', '<blend-mode>') }}</td>
<td>{{ Spec2('Compositing') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>35</td>
<td>{{compatVersionUnknown()}}</td>
<td>{{compatUnknown()}}</td>
<td>{{compatUnknown()}}</td>
<td>{{compatUnknown()}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{compatUnknown()}}</td>
<td>{{compatUnknown()}}</td>
<td>{{compatVersionUnknown()}}</td>
<td>{{compatUnknown()}}</td>
<td>{{compatUnknown()}}</td>
<td>{{compatUnknown()}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li>Properties using a value of this type: {{cssxref("background-blend-mode")}} and {{cssxref("mix-blend-mode")}}</li>
<li><a href="https://en.wikipedia.org/wiki/Blend_modes">Blend modes</a></li>
<li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a> index</li>
<li>CSS Data Types : {{CSSDataTypes}}</li>
</ul>