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

---
title: <blend-mode>
slug: Web/CSS/blend-mode
tags:
  - Composición
  - Composición CSS
  - Modos de mezcla
  - Referencia
  - Tipo de Dato CSS
translation_of: Web/CSS/blend-mode
---
<p>{{CSSRef}}</p>

<h2 id="Resumen">Resumen</h2>

<p>El tipo <strong><code>&lt;blend-mode&gt;</code></strong> es una coleccion de palabras clave que describen modos de mezcla.</p>

<p>Un modo de mezcla (blend mode) es un método para calcular el color final de un píxel cuando hay dos capas superpuestas. Cada modo de mezcla toma el valor del color de primer plano y el de fondo (color superior y color inferior, respectivamente), realiza su cálculo y devuelve el valor de color. La capa final visible es el resultado de realizar el cálculo del modo de mezcla en cada pixel sobrepuesto entre las capas mezcladas.</p>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="syntaxbox">Sintaxis formal: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity</pre>

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

<dl>
 <dt><code>normal</code></dt>
 <dd>
 <p>El color final es el de la capa superior, sin importar el color de fondo.<br>
  El efecto es similar a dos trozos de papel sobrepuestos.</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 {
    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>El color final es el resultado de multiplicar el color superior y el inferior.<br>
  Una capa negra conduce a una capa final negra, y una capa blanca lleva a que no haya cambios.<br>
  El efecto ese similar a dos imágenes impresas en papel transparente sobrepuestas.</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 {
    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>El color final ees el resultado de invertir los colores, multiplicándolos e invirtiendo el valor resultante.<br>
  Una capa negra no produce cambio alguno, y una capa blanca conduce a una capa blanca final.<br>
  El efecto es similar a dos imágenes mostrándose desde un proyector.</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 {
    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>El color final es el resultado de <code>multiply</code> si el color inferior es más oscuro, o <code>screen</code> si el color inferior es más claro.<br>
 Este modo de mezcla es equivalente a <code>hard-light</code>, pero si las capas son intercambiadas.
 <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 {
    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>El resultado final es un color compuesto de los valores más oscuros por cada canal de color.</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 {
    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>El resultado final es un color compuesto de los valores más claros por cada canal de color.</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 {
    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>El color final es el resultado de dividir el color inferior por el inverso del color superior.<br>
  Un fondo negro no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce un color completamente iluminado.<br>
  Este modo de mezcla es similar a <code>screen</code>, pero basta con que el color de primer plano sea tan claro como el inverso del color de fondo para alcanzar un color completamente iluminado.</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 {
    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>El color final es el resultado de invertir el color de fondo, dividier el valor por el color superior, e invertir ese valor.<br>
  Un fondo blanco no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce una imagen negra.<br>
  Este modo de mezcla es similar a <code>multiply</code>, pero basta con que el color de primer plano sea tan oscuro como el inverso del color de fondo para dar como resultado una imagen negra.</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 {
    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>El color final es el resultado de <code>multiply</code> si el color superior es más oscuro, o <code>screen</code> si el color superior es más oscuro.<br>
  Este modo de mezcla es equivalente a <code>overlay</code>, pero con las capas intercambiadas.<br>
  El efecto es similar a encender un foco con mucha <em>intensidad</em> en el fondo.</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 {
    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>El color final es similar a <code>hard-light</code>, pero más suave.<br>
  Este modo de mezcla se comporta similar a <code>hard-light</code>.<br>
  El efecto es similar a encender un foco <em>difuso</em> en el fondo<em><code>.</code></em></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 {
    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>El color final es elresultado de restar el color más oscuro de las dos capas, del más claro.<br>
  Una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.</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 {
    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>El color final es similar a <code>difference,</code> pero con menor contraste.<br>
  Así como con <code>difference</code>,  una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.</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 {
    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>El color final tiene el <em>matiz</em> del color superior, mientras usa la <em>saturación</em> y <em>luminosidad</em> del color inferior.</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 {
    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>El color final tiene la <em>saturación</em> del color superior, mientras usa el <em>matiz</em> y <em>luminosidad</em> del color inferior.<br>
  Un fondo gris puro, que no tenga saturación, no producirá efecto alguno.</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 {
    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>El color final tiene el <em><em>matiz</em></em> y <em><em>saturación</em></em> del color superior, mientras usa la <em>luminosidad</em> del color inferior.<br>
  El efecto preserva los niveles de grid y puede ser usado para colorear el primer plano.</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 {
    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>El color final tiene la <em>luminosidad</em> del color superior, mientras usa el <em>matiz</em> y <em>saturación</em> del color inferior.<br>
  Este modo de mezcla es equivalente a <code>color</code>, pero con las capas intercambiadas.</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 {
    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="Interpolación_de_modos_de_mezcla">Interpolación de modos de mezcla</h2>

<div> </div>

<p>Los cambios entre modos de mezcla no son interpolados. Cualquier cambio ocurrirá abruptamente.</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;') }}</td>
   <td>{{ Spec2('Compositing') }}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegadores</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</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>Característica</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>Soporte básico</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="Véase_también">Véase también</h2>

<ul>
 <li>Propiedades que usan valores de este tipo: {{cssxref("background-blend-mode")}} y {{cssxref("mix-blend-mode")}}</li>
 <li><a href="http://en.wikipedia.org/wiki/Blend_modes">Blend modes</a></li>
 <li>Índice de <a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">Referencia CSS</a></li>
</ul>