<p>{{CSSRef}}</p>
<h2 id="Summary">Summary</h2>
<p>The <strong><code><blend-mode></code></strong> type is a collection of keywords describing a blend mode, that is the way that the color of two layers mix.</p>
<h2 id="Possible_values">Possible values</h2>
<dl>
<dt>
<code>normal</code></dt>
<dd>
<p>This keyword indicates that no blending will happen: the selected color is the one of the image on the top, and not the one of the backdrop.</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>This keyword indicates that the blended color is the multiplication of the front color and the one of the background. Multiplication of colors always result in a color as dark as the original ones. To the limit, multiplying with black results in black, and multiplying with white results in the other original color.</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>This keyword simulates the simultaneous projection of the two images on a screen: the resulting color is always as light as the original ones. To the limit, multiplying with black results in the other original color, and multiplying with white results in white.</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>
<p>The...</p>
<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>This keyword selects, for each pixel, the darkest color of the backdrop or the front image.</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>This keyword selects, for each pixel, the lightest color of the backdrop or the front image.</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>This keyword lightens the backdrop according to the value of the foreground color: the brighter it is, the more its color affects the backdrop. White on the foreground image leads to white.</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 keyword darkens the backdrop according to the value of the foreground color: the darker it is, the more its color affects the backdrop. Black on the foreground image leads to 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>This keyword acts as <code>multiply</code> or <code>screen</code> depending of the color of the foreground image for a given pixel. It reproduces an effect next to shining a harsh 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...</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>This keyword substracts the darker color to the lighter one. Black on the foreground has therefore no effect, white leads to the color of the backdrop, inverted.</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>This keyword is similar to <code>difference</code> but produce a result with less contrast. Like for <code>difference</code>, black on the foreground has no effect, while white leads to the color of the backdrop, inverted.</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>This keyword keeps the <em>hue</em> of the foreground color, while using the <em>saturation</em> and <em>luminosity</em> of the backdrop.</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>This keyword keeps the <em>saturation</em> of the foreground color, while using the <em>hue</em> and <em>luminosity</em> of the backdrop. A backdrop with no saturation, that is a pure grey, will lead to no change to the foreground image.</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>This keyword keeps the <em><em>saturation</em> and <em>hue</em></em> of the foreground color, while using the <em>luminosity</em> of the backdrop. This preserves gray levels and can be used to colorize the foreground image.</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>This keyword keeps the <em>luminosity</em> of the foreground color, while using the <em>saturation</em> and <em>hue</em> of the backdrop.</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>No interpolation of blend modes can happens; transitions happen 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>
</ul>