Los modos de mezcla CSS, inspirados en herramientas de diseño gráfico como Photoshop, permiten combinar dos o más capas de contenido de formas visualmente impactantes. Estas propiedades ajustan cómo los píxeles de una capa (la fuente) interactúan con los píxeles de la capa subyacente (el fondo), creando una amplia gama de efectos de color y luminancia. El CSS moderno ofrece dieciséis modos de mezcla distintos, accesibles a través de propiedades como mix-blend-mode e background-blend-mode.

Modos de Mezcla Disponibles

Actualmente, CSS3 soporta 16 modos de mezcla, cada uno con una lógica de cálculo de color única que determina el resultado final al combinar los colores de la capa superior con los de la capa inferior:

Modo CSS	Nombre en Español	Descripción Funcional
normal	Normal	Los píxeles de la capa superior se muestran sin mezcla, con la opacidad controlando su visibilidad.
multiply	Multiplicar	Multiplica el color de la capa superior por el color de la capa inferior, resultando en un color más oscuro. Similar a dibujar con marcadores.
screen	Trama	Multiplica los inversos de los colores de la capa superior y el fondo, produciendo un color más claro. Similar a proyectar varias diapositivas.
overlay	Superponer	Combina los efectos de multiply y screen; oscurece las áreas oscuras y aclara las áreas claras, realznado el contraste.
darken	Oscurecer	Compara los colores y selecciona el más oscuro de los dos para cada píxel. Las áreas más claras que el color base se reemplazan.
lighten	Aclarar	Compara los colores y selecciona el más claro de los dos para cada píxel. Las áreas más oscuras que el color base se reemplazan.
color-dodge	Sobreexponer color	Aclara la capa inferior para reflejar la capa superior, reduciendo el contraste. Mezclar con negro no produce cambios.
color-burn	Subexponer color	Oscurece la capa inferior para reflejar la capa superior, aumentando el contraste. Mezclar con blanco no produce cambios.
hard-light	Luz fuerte	Aplica multiply o screen dependiendo de la luminosidad de la capa superior. Un efecto de luz dura directa.
soft-light	Luz suave	Aplica darken o lighten dependiendo de la luminosidad de la capa superior. Un efecto de luz difusa más sutil.
difference	Diferencia	Resta el color más oscuro del más claro. Si los colores son idénticos, el resultado es negro. Con blanco, invierte el color.
exclusion	Exclusión	Similar a difference pero con un contraste y saturación más bajos, resultando en un efecto más suave.
hue	Tono	Conserva la luminosidad y saturación del fondo, pero adopta el tono de la capa superior.
saturation	Saturación	Conserva la luminosidad y el tono del fondo, pero adopta la saturación de la capa superior.
color	Color	Conserva la luminosidad del fondo, pero adopta el tono y la saturación de la capa superior. Ideal para colorear imágenes en escala de grises.
luminosity	Luminosidad	Conserva el tono y la saturación del fondo, pero adopta la luminosidad de la capa superior.

Clasificación de Modos de Mezcla

Para simplificar su comprensión y aplicación, los modos de mezcla pueden agruparse en categorías funcinoales:

• Modo Base: normal (controla la visibilidad de la capa superior).
• Modos de Oscurecimiento: darken, multiply, color-burn (reducen las luces y oscurecen la imagen).
• Modos de Aclaramiento: screen, lighten, color-dodge (filtran las sombras y aclaran la imagen).
• Modos de Contraste: overlay, soft-light, hard-light (fusionan las capas, afectando el contraste de manera dinámica).
• Modos Invertidos/Especiales: difference, exclusion (crean efectos de inversión o variación).
• Modos Cromáticos: hue, saturation, color, luminosity (alteran propiedades específicas del color como tono, saturación o brillo).

Propiedades CSS de Modos de Mezcla

Las propiedades principales para controlar los modos de mezcla en CSS son mix-blend-mode, isolation y background-blend-mode. A continuación, exploraremos cada una.

La Propiedad mix-blend-mode

La propiedad mix-blend-mode define cómo el contenido de un elemento se mezcla con el contenido de los elementos que están directamente debajo de él y con el fondo del elemento que lo contiene. Se aplica a todos los elementos HTML, incluyendo imágenes, texto y elementos SVG.

Sintaxis

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

El valor por defecto es normal.

Ejemplo básico:

.imagen-mezclada {
   mix-blend-mode: multiply;
 }
 

Para que la mezcla sea efectiva, los elementos deben superponerse en la pila de renderizado.

Demostraciones de mix-blend-mode

A continuación, se presentan ejemplos visuales de cómo cada modo de mezcla afecta una imagen superpuesta sobre un fondo de color sólido. Para cada ejemplo, se utiliza una estructura HTML similar:

<div class="contenedor-mezcla">
   <img src="https://www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test.jpg" alt="Imagen base" class="imagen-con-modo-mezcla">
 </div>
 

Y el CSS de base para el contenedor y la imagen:

.contenedor-mezcla {
   background-color: #008000; /* Verde */
   width: 300px; /* Ancho de ejemplo */
   height: 200px; /* Alto de ejemplo */
   margin: 15px auto;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden; /* Para contener la imagen */
 }
 .imagen-con-modo-mezcla {
   width: 100%;
   height: 100%;
   object-fit: cover; /* Ajustar imagen */
   /* Aquí se aplicará mix-blend-mode */
 }
 

Normal

El modo predeterminado. La imagen se muestra sin alteraciones, como si no se aplicara ningún modo de mezcla.

.imagen-con-modo-mezcla {
   mix-blend-mode: normal;
 }
 

Multiplicar (multiply)

Los colores se combinan para crear un resultado más oscuro. El fondo verde se mezcla con la imagen, oscureciendo las partes claras de la imagen y las áreas transparentes adoptan el verde oscuro.

.imagen-con-modo-mezcla {
   mix-blend-mode: multiply;
 }
 

Trama (screen)

Los colores se combinan para crear un resultado más claro. El fondo verde aclara las áreas oscuras de la imagen. El negro no afecta, el blanco resulta en blanco.

.imagen-con-modo-mezcla {
   mix-blend-mode: screen;
 }
 

Superponer (overlay)

Combina multiply y screen. Oscurece los tonos oscuros del fondo y aclara los tonos claros del fondo. El contraste de la imagen se realza sobre el fondo.

.imagen-con-modo-mezcla {
   mix-blend-mode: overlay;
 }
 

Oscurecer (darken)

Mantiene el color más oscuro de la imagen o del fondo. Las partes más claras de la imagen que el fondo verde se vuelven verdes.

.imagen-con-modo-mezcla {
   mix-blend-mode: darken;
 }
 

Aclarar (lighten)

Mantiene el color más claro de la imagen o del fondo. Las partes más oscuras de la imagen que el fondo verde se vuelven verdes.

.imagen-con-modo-mezcla {
   mix-blend-mode: lighten;
 }
 

Sobreexponer color (color-dodge)

Aclara la capa inferior (fondo) en función de la luminosidad de la capa superior. Un verde más claro se obtiene donde la imagen es brillante.

.imagen-con-modo-mezcla {
   mix-blend-mode: color-dodge;
 }
 

Subexponer color (color-burn)

Oscurece la capa inferior (fondo) en función de la luminosidad de la capa superior. Un verde más oscuro se obtiene donde la imagen es oscura.

.imagen-con-modo-mezcla {
   mix-blend-mode: color-burn;
 }
 

Luz fuerte (hard-light)

Aplica multiply o screen basándose en los valores de color de la capa superior. Un efecto de iluminación dramático.

.imagen-con-modo-mezcla {
   mix-blend-mode: hard-light;
 }
 

Luz suave (soft-light)

Aplica darken o lighten basándose en los valores de color de la capa superior. Un efecto de iluminación más sutil y suave.

.imagen-con-modo-mezcla {
   mix-blend-mode: soft-light;
 }
 

Diferencia (difference)

Resta el valor de color más oscuro del más claro. Si el fondo es blanco, la imagen se invierte; si es negro, no hay cambio.

.imagen-con-modo-mezcla {
   mix-blend-mode: difference;
 }
 

Exclusión (exclusion)

Similar a difference, pero produce un resultado más suave y de menor contraste.

.imagen-con-modo-mezcla { mix-blend-mode: exclusion; }

Tono (hue)

La imagen adopta el tono de la capa superior, manteniendo la saturación y luminosidad del fondo.

.imagen-con-modo-mezcla {
   mix-blend-mode: hue;
 }
 

Saturación (saturation)

La imagen adopta la saturación de la capa superior, manteniendo el tono y la luminosidad del fondo.

.imagen-con-modo-mezcla {
   mix-blend-mode: saturation;
 }
 

Color (color)

La imagen adopta el tono y la saturación de la capa superior, manteniendo la luminosidad del fondo. Ideal para colorear fotos en blanco y negro.

.imagen-con-modo-mezcla {
   mix-blend-mode: color;
 }
 

Luminosidad (luminosity)

La imagen adopta la luminosidad de la capa superior, manteniendo el tono y la saturación del fondo.

.imagen-con-modo-mezcla {
   mix-blend-mode: luminosity;
 }
 

Ejemplo con Múltiples Fondos de Color

Consideremos un fondo con múltiples franjas de color y una imagen superpuesta utilizando un modo de mezcla. Los resultados variarán para cada franja de color:

<div class="multi-color-container">
   <div class="color-stripe red"></div>
   <div class="color-stripe orange"></div>
   <div class="color-stripe yellow"></div>
   <div class="color-stripe green"></div>
   <div class="color-stripe cyan"></div>
   <div class="color-stripe blue"></div>
   <div class="color-stripe purple"></div>
   <img src="https://www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test.jpg" alt="Imagen con mezcla" class="imagen-superpuesta">
 </div>
 

.multi-color-container {
   position: relative;
   width: 320px;
   height: 400px;
   margin: 20px auto;
   overflow: hidden;
 }
 .color-stripe {
   width: 100%;
   height: calc(100% / 7); /* Divide en 7 franjas iguales */
 }
 .red { background-color: red; }
 .orange { background-color: orange; }
 .yellow { background-color: yellow; }
 .green { background-color: green; }
 .cyan { background-color: cyan; }
 .blue { background-color: blue; }
 .purple { background-color: purple; }

 .imagen-superpuesta {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   mix-blend-mode: difference; /* Por ejemplo */
 }
 

Texto y Fondo con mix-blend-mode

mix-blend-mode no se limita a imágenes. Puede aplicarse a texto superpuesto sobre un fondo con una imagen:

<div class="contenedor-texto-blend">
   <p class="texto-blend">MEZCLA DE TEXTO</p>
 </div>
 

.contenedor-texto-blend {
   background-image: url("https://www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test2.jpg");
   background-size: cover;
   background-position: center;
   height: 150px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 20px auto;
   width: 400px;
 }
 .texto-blend {
   font-size: 3em;
   font-weight: bold;
   color: white; /* Color base del texto */
   mix-blend-mode: overlay; /* Ejemplo de modo de mezcla */
 }
 

Imágenes superpuestas con mix-blend-mode

También es posible mezclar una imagen con otra imagen que sirva de fondo:

<div class="contenedor-imagen-sobre-imagen">
   <img src="https://www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test.jpg" alt="Imagen frontal" class="imagen-frontal">
 </div>
 

.contenedor-imagen-sobre-imagen {
   background-image: url("https://www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test2.jpg");
   background-size: cover;
   background-position: center;
   height: 250px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 20px auto;
   width: 400px;
 }
 .imagen-frontal {
   width: 80%; /* Imagen frontal más pequeña que el contenedor */
   height: 80%;
   object-fit: cover;
   mix-blend-mode: multiply; /* Modo de mezcla */
 }
 

La Propiedad isolation

Por defecto, un elemento con mix-blend-mode se mezcla con todos los elementos apilados debajo de él. La propiedad isolation permite crear un nuevo contexto de apilamiento para un elemento, aislando sus modos de mezcla del contenido exterior.

Sintaxis

isolation: auto | isolate;
 

auto es el valor predeterminado, donde el elemento no crea un nuevo contexto de apilamiento. isolate fuerza al elemento a crear un nuevo contexto de apilamiento, lo que significa que sus modos de mezcla solo afectarán a los elementos dentro de ese nuevo contexto o sus propios fondos, y no a los elementos fuera de él.

Si desea que los efectos de mezcla de una imagen solo interactúen con su contenedor directo y no con otros elementos en el fondo de la página, aplique isolation: isolate; al contenedor:

.contenedor-aislado {
   isolation: isolate;
   /* ... otros estilos, como background-color o background-image */
 }
 .contenedor-aislado img {
   mix-blend-mode: multiply; /* Solo se mezcla con .contenedor-aislado */
 }
 

La Propiedad background-blend-mode

Mientras que mix-blend-mode mezcla el contenido de un elemento con lo que está debajo, background-blend-mode se utiliza específicamente para definir cómo se mezclan las capas de fondo de un elemento entre sí. Esto incluye imágenes de fondo con colores de fondo, o múltiples imágenes de fondo entre sí.

Es importante recordar que el background-color de un elemento se encuentra debajo de todas las background-images en el modelo de caja CSS.

Sintaxis

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;
 

El valor por defecto es normal.

Ejemplo de background-blend-mode

Para ilustrar, mezclaremos una imagen de fondo con un color de fondo en un elemento div:

<div class="elemento-con-fondo-mezclado">
     <p>Fondo Mezclado</p>
 </div>
 

.elemento-con-fondo-mezclado {
   background-image: url("https://www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test.jpg");
   background-color: #f34545; /* Rojo de fondo */
   background-size: cover;
   background-position: center;
   height: 200px;
   width: 400px;
   margin: 20px auto;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2em;
   color: white;
   background-blend-mode: multiply; /* Modo de mezcla de fondo */
 }
 

Mezclando Múltiples Fondos

background-blend-mode también permite mezclar múltiples imágenes de fondo y gradientes. Los modos de mezcla se aplican en el orden en que se declaran las capas de fondo, de arriba hacia abajo.

.multiple-backgrounds {
   background-image:
       radial-gradient(circle at center, rgb(220, 75, 200), rgb(0, 0, 75)), /* Capa 1: Gradiente */
       url("https://www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test.jpg"); /* Capa 2: Imagen */
   background-color: #008000; /* Capa 3: Color */
   background-size: cover;
   background-position: center;
   height: 250px;
   width: 450px;
   margin: 20px auto;
   background-blend-mode: overlay, screen; /* Modo para Capa 1, Modo para Capa 2 */
   /* La Capa 3 (background-color) se mezcla con la última capa de imagen aplicando el último modo (screen) */
 }
 

Si la imagen del gradiente se coloca primero, se mezcla con la primera imagen de la lista de background-blend-mode. La segunda imagen se mezclará con el background-color usando el segundo modo.

Casos de Uso Avanzados

Los modos de mezcla no solo sirven para imágenes y texto. Su versatilidad se extiende a elementos como <svg> y <canvas>. Combinados con otras características CSS como máscaras, gradientes, filtros y animaciones, permiten crear efectos visuales complejos y dinámicos, abriendo un abanico de posibilidades para el diseño web creativo.

Compatibilidad del Navegador

La compatibilidad de los modos de mezcla CSS es excelente en navegadores modernos. Todos los navegadores principales, incluidos Chrome, Firefox, Safari, Edge y Opera, ofrecen soporte completo para mix-blend-mode y background-blend-mode en sus versiones estables. Esto significa que los desarrolladores pueden utilizar estas propiedades con confianza para mejorar la estética de sus sitios web sin preocuparse por la fragmentación del soporte.