path: root/files/ru/web/css/blend-mode/index.html

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

<h2 id="Описание" style="">Описание</h2>

<p>The <strong><code>&lt;blend-mode&gt;</code></strong> type is a collection of keywords describing blend modes.</p>

<p>A blend mode is a method of calculating the final color value of a pixel when layers overlap. 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. The final, visible layer is the result of performing the blend mode calculation on every overlapping pixel among the blended layers.</p>

<h2 id="Синтаксис" style="">Синтаксис</h2>

<pre class="syntaxbox">Формальный синтаксис: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity</pre>

<h3 id="Возможные_значения" style="">Возможные значения</h3>

<dl style="">
 <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: css" class="hidden">#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: css" class="hidden">#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: css" class="hidden">#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: css" class="hidden">#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: css" class="hidden">#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: css" class="hidden">#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: css" class="hidden">#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: css" class="hidden">#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: css" class="hidden">#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: css" class="hidden">#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: css" class="hidden">#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: css" class="hidden">#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: css" class="hidden">#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: css" class="hidden">#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: css" class="hidden">#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 style="">
 <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: css" class="hidden">#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 style="">{{ EmbedLiveSample('luminosity', "300", "300") }}</p>
 </dd>
</dl>

<h2 id="Интерполяция_режимов_наложения" style=""><span class="short_text" id="result_box" lang="ru"><span class="hps">Интерполяция режимов наложения</span></span></h2>

<div> </div>

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

<h2 id="Спецификации" style="">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr style="">
   <td style="">{{ SpecName('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;') }}</td>
   <td>{{ Spec2('Compositing') }}</td>
   <td style="">Первоначальное определение</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility" style="">Совместимость с браузерами</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop" style="">
<table class="compat-table">
 <tbody>
  <tr style="">
   <th style="">Особенность</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Базовая поддержка</td>
   <td>35</td>
   <td>{{compatVersionUnknown()}}</td>
   <td>{{compatUnknown()}}</td>
   <td>{{compatUnknown()}}</td>
   <td>{{compatUnknown()}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile" style="">
<table class="compat-table">
 <tbody>
  <tr style="">
   <th style="">Особенность</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>Базовая поддержка</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="Смотрите_также" style="">Смотрите также</h2>

<ul style="">
 <li>Properties using a value of this type: {{cssxref("background-blend-mode")}} and {{cssxref("mix-blend-mode")}}</li>
 <li style=""><a href="http://en.wikipedia.org/wiki/Blend_modes" style="">Blend modes</a></li>
 <li style=""><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a> index</li>
</ul>