Propiedad CSS mix-blend-mode

La propiedad CSS mix-blend-mode controla cómo el contenido de un elemento se mezcla con el contenido que está detrás de él — generalmente el background-color, background-image del elemento padre, u otro elemento superpuesto. En lugar de que una capa simplemente cubra a la otra, el navegador combina sus píxeles con una fórmula matemática (multiply, screen, difference, etc.), del mismo modo en que funcionan los modos de fusión en Photoshop.

Esta página explica qué hace cada modo de fusión, cuándo importa el contexto de apilamiento y ofrece ejemplos ejecutables para los valores más útiles.

Cómo funciona la mezcla

Para que la mezcla sea visible necesitas que dos capas se superpongan — por ejemplo, un <img> encima de un <div> de color. El modo de fusión combina los píxeles del primer plano con los píxeles del fondo:

multiply oscurece — el blanco del primer plano desaparece y las áreas oscuras permanecen. Ideal para sombras y tintes.
screen aclara — el negro desaparece y las áreas claras permanecen. Es el inverso de multiply.
overlay combina ambos: oscurece las áreas oscuras y aclara las claras, aumentando el contraste.
difference / exclusion restan colores, produciendo efectos invertidos de alto contraste.
hue, saturation, color, luminosity mezclan un canal del primer plano (su matiz, saturación, etc.) con el resto del fondo — útiles para recolorear imágenes.

Hay 16 modos de fusión en total (listados en la tabla de Valores a continuación).

Contexto de apilamiento y aislamiento

Establecer cualquier valor distinto de normal crea un nuevo contexto de apilamiento en el elemento. El elemento solo se mezcla con el contenido dentro de ese contexto de apilamiento — no se mezclará con nada fuera de él. Esto es lo que evita que un elemento mezclado afecte a toda la página.

Por este motivo, cualquier propiedad que establezca un contexto de apilamiento (como opacity menor que 1, transform o position con z-index) puede cambiar el resultado de la mezcla. Para impedir deliberadamente que un elemento se mezcle con lo que hay detrás, asigna la propiedad isolation: isolate a un ancestro — esto crea un nuevo contexto de apilamiento para que la mezcla quede contenida.

Consejo

Si quieres mezclar las imágenes de fondo de un elemento entre sí, puedes usar la propiedad background-blend-mode.

Valor inicial	normal
Se aplica a	Todos los elementos.
Heredado	No.
Animatable	No.
Versión	CSS1
Sintaxis DOM	object.style.mixBlendMode = "exclusion";

Sintaxis

Sintaxis de la propiedad CSS mix-blend-mode

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity | initial | inherit;

Ejemplo de la propiedad mix-blend-mode:

Ejemplo de la propiedad CSS mix-blend-mode con el valor multiply

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: multiply;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: multiply</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad mix-blend-mode con el valor "screen":

Ejemplo de la propiedad CSS mix-blend-mode con el valor screen

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: screen;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: screen</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad mix-blend-mode con el valor "color-dodge":

Ejemplo de la propiedad CSS mix-blend-mode con el valor color-dodge

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: color-dodge;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: color-dodge</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad mix-blend-mode con el valor "hue":

Ejemplo de la propiedad CSS mix-blend-mode con el valor hue

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: hue;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: hue</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad mix-blend-mode con el valor "normal":

Propiedad CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 500px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: normal;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: normal</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de mix-blend-mode con el valor "hard-light":

Propiedad CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: hard-light;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: hard-light</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de mix-blend-mode con el valor "difference":

Propiedad CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: difference;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: difference</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción
normal	Sin mezcla — el elemento se pinta normalmente sobre el fondo. Es el valor predeterminado.
multiply	Multiplica los colores; el resultado siempre es más oscuro. El blanco no tiene efecto, el negro sigue siendo negro.
screen	Invierte, multiplica e invierte de nuevo; el resultado siempre es más claro. Lo opuesto a `multiply`.
overlay	`multiply` en las áreas oscuras y `screen` en las claras — aumenta el contraste.
darken	Conserva el color más oscuro de los dos para cada canal.
lighten	Conserva el color más claro de los dos para cada canal.
color-dodge	Aclara el fondo para reflejar el color del primer plano.
color-burn	Oscurece el fondo para reflejar el color del primer plano.
hard-light	Como `overlay` pero con las capas intercambiadas — efecto de foco intenso.
soft-light	Una versión más suave de `hard-light`, como un foco difuso.
difference	Resta el color más oscuro del más claro; los colores iguales producen negro.
exclusion	Similar a `difference` pero con menor contraste.
hue	Matiz del primer plano con la saturación y luminosidad del fondo.
saturation	Saturación del primer plano con el matiz y luminosidad del fondo.
color	Matiz y saturación del primer plano con la luminosidad del fondo — recolorea conservando el detalle.
luminosity	Luminosidad del primer plano con el matiz y saturación del fondo.
initial	Establece la propiedad en su valor predeterminado (`normal`).
inherit	Hereda el valor del elemento padre.

Propiedades relacionadas

background-blend-mode — mezcla las propias capas de fondo de un elemento (imágenes y color) entre sí, en lugar de mezclarlo con lo que hay detrás del elemento.
isolation — crea un contexto de apilamiento para que una mezcla quede contenida.
opacity y filter — otras formas de modificar cómo se compone un elemento.

Práctica

¿Qué ocurre cuando estableces mix-blend-mode en un valor distinto de 'normal'?

Se crea un nuevo contexto de apilamiento en el elementoEl elemento también se mezcla con el contenido fuera de su contexto de apilamientoLas imágenes de fondo del elemento se mezclan entre síNo cambia nada a menos que también se establezca opacity

Práctica

¿Qué modo de fusión siempre produce un resultado más oscuro, donde el blanco del primer plano no tiene efecto?

multiplyscreennormalluminosity