Revision 665415 of <blend-mode>

Revision slug: Web/CSS/blend-mode
Revision title: <blend-mode>
Revision id: 665415
Created: Sep 11, 2014, 1:04:33 AM
Creator: teoli
Is current revision? No
Comment

Tags:

Revision Content

Summary

The <blend-mode> type is a collection of keywords describing a blend mode, that is the way that the color of two layers mix.

Possible values

normal

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.

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

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

multiply

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.

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

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

screen

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.

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

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

overlay

The...

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

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

darken

This keyword selects, for each pixel, the darkest color of the backdrop or the front image.

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

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

lighten

This keyword selects, for each pixel, the lightest color of the backdrop or the front image.

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

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

color-dodge

The...

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

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

color-burn

The...

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

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

hard-light

The...

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

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

soft-light

The...

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

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

difference

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.

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

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

exclusion

This keyword is similar to difference but produce a result with less contrast. Like for difference, black on the foreground has no effect, while white leads to the color of the backdrop, inverted.

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

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

hue

The...

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

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

saturation

The...

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

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

color

The...

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

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

luminosity

The...

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

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

Interpolation of blend modes

No interpolation of blend modes can happens; transitions happen abruptly.

Specifications

Specification	Status	Comment
{{ SpecName('Compositing', '#basic-shape-functions', '<basic-shape>') }}	{{ Spec2('Compositing') }}	Initial definition.

Browser Compatibility

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	{{compatUnknown()}}	{{compatVersionUnknown()}}	{{compatUnknown()}}	{{compatUnknown()}}	{{compatUnknown()}}

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	{{compatUnknown()}}	{{compatUnknown()}}	{{compatVersionUnknown()}}	{{compatUnknown()}}	{{compatUnknown()}}	{{compatUnknown()}}

Revision Source

<p>{{CSSRef}}</p>
<h2 id="Summary">Summary</h2>
<p>The <strong><code>&lt;blend-mode&gt;</code></strong>&nbsp;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">
&lt;div id="div"&gt;&lt;/div&gt;</pre>
   <pre class="brush: css" style="display:none">
#div {
&nbsp;&nbsp;&nbsp; width: 300px;
&nbsp;&nbsp;&nbsp; height: 300px;
&nbsp;&nbsp;&nbsp; background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
&nbsp;&nbsp;&nbsp; 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">
&lt;div id="div"&gt;&lt;/div&gt;</pre>
   <pre class="brush: css" style="display:none">
#div {
&nbsp;&nbsp;&nbsp; width: 300px;
&nbsp;&nbsp;&nbsp; height: 300px;
&nbsp;&nbsp;&nbsp; background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
&nbsp;&nbsp;&nbsp; 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">
&lt;div id="div"&gt;&lt;/div&gt;</pre>
   <pre class="brush: css" style="display:none">
#div {
&nbsp;&nbsp;&nbsp; width: 300px;
&nbsp;&nbsp;&nbsp; height: 300px;
&nbsp;&nbsp;&nbsp; background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
&nbsp;&nbsp;&nbsp; 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">
&lt;div id="div"&gt;&lt;/div&gt;</pre>
   <pre class="brush: css" style="display:none">
#div {
&nbsp;&nbsp;&nbsp; width: 300px;
&nbsp;&nbsp;&nbsp; height: 300px;
&nbsp;&nbsp;&nbsp; background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
&nbsp;&nbsp;&nbsp; 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">
&lt;div id="div"&gt;&lt;/div&gt;</pre>
   <pre class="brush: css" style="display:none">
#div {
&nbsp;&nbsp;&nbsp; width: 300px;
&nbsp;&nbsp;&nbsp; height: 300px;
&nbsp;&nbsp;&nbsp; background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
&nbsp;&nbsp;&nbsp; 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">
&lt;div id="div"&gt;&lt;/div&gt;</pre>
   <pre class="brush: css" style="display:none">
#div {
&nbsp;&nbsp;&nbsp; width: 300px;
&nbsp;&nbsp;&nbsp; height: 300px;
&nbsp;&nbsp;&nbsp; background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
&nbsp;&nbsp;&nbsp; background-blend-mode: lighten;
}</pre>
  </div>
  <p>{{ EmbedLiveSample('lighten', "300", "300") }}</p>
 </dd>
 <dt>
  <code>color-dodge</code></dt>
 <dd>
  <p>The...</p>
  <div id="color-dodge">
   <pre class="brush: html" style="display:none">
&lt;div id="div"&gt;&lt;/div&gt;</pre>
   <pre class="brush: css" style="display:none">
#div {
&nbsp;&nbsp;&nbsp; width: 300px;
&nbsp;&nbsp;&nbsp; height: 300px;
&nbsp;&nbsp;&nbsp; background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
&nbsp;&nbsp;&nbsp; background-blend-mode: color-dodge;
}</pre>
  </div>
  <p>{{ EmbedLiveSample('color-dodge', "300", "300") }}</p>
 </dd>
 <dt>
  <code>color-burn</code></dt>
 <dd>
  <p>The...</p>
  <div id="color-burn">
   <pre class="brush: html" style="display:none">
&lt;div id="div"&gt;&lt;/div&gt;</pre>
   <pre class="brush: css" style="display:none">
#div {
&nbsp;&nbsp;&nbsp; width: 300px;
&nbsp;&nbsp;&nbsp; height: 300px;
&nbsp;&nbsp;&nbsp; background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
&nbsp;&nbsp;&nbsp; background-blend-mode: color-burn;
}</pre>
  </div>
  <p>{{ EmbedLiveSample('color-burn', "300", "300") }}</p>
 </dd>
 <dt>
  <code>hard-light</code></dt>
 <dd>
  <p>The...</p>
  <div id="hard-light">
   <pre class="brush: html" style="display:none">
&lt;div id="div"&gt;&lt;/div&gt;</pre>
   <pre class="brush: css" style="display:none">
#div {
&nbsp;&nbsp;&nbsp; width: 300px;
&nbsp;&nbsp;&nbsp; height: 300px;
&nbsp;&nbsp;&nbsp; background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
&nbsp;&nbsp;&nbsp; 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">
&lt;div id="div"&gt;&lt;/div&gt;</pre>
   <pre class="brush: css" style="display:none">
#div {
&nbsp;&nbsp;&nbsp; width: 300px;
&nbsp;&nbsp;&nbsp; height: 300px;
&nbsp;&nbsp;&nbsp; background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
&nbsp;&nbsp;&nbsp; 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">
&lt;div id="div"&gt;&lt;/div&gt;</pre>
   <pre class="brush: css" style="display:none">
#div {
&nbsp;&nbsp;&nbsp; width: 300px;
&nbsp;&nbsp;&nbsp; height: 300px;
&nbsp;&nbsp;&nbsp; background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
&nbsp;&nbsp;&nbsp; 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>,&nbsp; 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">
&lt;div id="div"&gt;&lt;/div&gt;</pre>
   <pre class="brush: css" style="display:none">
#div {
&nbsp;&nbsp;&nbsp; width: 300px;
&nbsp;&nbsp;&nbsp; height: 300px;
&nbsp;&nbsp;&nbsp; background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
&nbsp;&nbsp;&nbsp; background-blend-mode: exclusion;
}</pre>
  </div>
  <p>{{ EmbedLiveSample('exclusion', "300", "300") }}</p>
 </dd>
 <dt>
  <code>hue</code></dt>
 <dd>
  <p>The...</p>
  <div id="hue">
   <pre class="brush: html" style="display:none">
&lt;div id="div"&gt;&lt;/div&gt;</pre>
   <pre class="brush: css" style="display:none">
#div {
&nbsp;&nbsp;&nbsp; width: 300px;
&nbsp;&nbsp;&nbsp; height: 300px;
&nbsp;&nbsp;&nbsp; background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
&nbsp;&nbsp;&nbsp; background-blend-mode: hue;
}</pre>
  </div>
  <p>{{ EmbedLiveSample('hue', "300", "300") }}</p>
 </dd>
 <dt>
  <code>saturation</code></dt>
 <dd>
  <p>The...</p>
  <div id="saturation">
   <pre class="brush: html" style="display:none">
&lt;div id="div"&gt;&lt;/div&gt;</pre>
   <pre class="brush: css" style="display:none">
#div {
&nbsp;&nbsp;&nbsp; width: 300px;
&nbsp;&nbsp;&nbsp; height: 300px;
&nbsp;&nbsp;&nbsp; background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
&nbsp;&nbsp;&nbsp; background-blend-mode: saturation;
}</pre>
  </div>
  <p>{{ EmbedLiveSample('saturation', "300", "300") }}</p>
 </dd>
 <dt>
  <code>color</code></dt>
 <dd>
  <p>The...</p>
  <div id="color">
   <pre class="brush: html" style="display:none">
&lt;div id="div"&gt;&lt;/div&gt;</pre>
   <pre class="brush: css" style="display:none">
#div {
&nbsp;&nbsp;&nbsp; width: 300px;
&nbsp;&nbsp;&nbsp; height: 300px;
&nbsp;&nbsp;&nbsp; background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
&nbsp;&nbsp;&nbsp; background-blend-mode: color;
}</pre>
  </div>
  <p>{{ EmbedLiveSample('color', "300", "300") }}</p>
 </dd>
 <dt>
  <code>luminosity</code></dt>
 <dd>
  <p>The...</p>
  <div id="luminosity">
   <pre class="brush: html" style="display:none">
&lt;div id="div"&gt;&lt;/div&gt;</pre>
   <pre class="brush: css" style="display:none">
#div {
&nbsp;&nbsp;&nbsp; width: 300px;
&nbsp;&nbsp;&nbsp; height: 300px;
&nbsp;&nbsp;&nbsp; background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
&nbsp;&nbsp;&nbsp; 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>
 &nbsp;</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', '#basic-shape-functions', '&lt;basic-shape&gt;') }}</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>{{compatUnknown()}}</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>{{cssxref("background-blend-mode")}} and {{cssxref("mix-blend-mode")}}</li>
</ul>

Revert to this revision