Propiedad CSS background-blend-mode

La propiedad CSS background-blend-mode define cómo las imágenes de fondo de un elemento se mezclan entre sí y con el background-color del elemento. Permite combinar fondos en capas de la misma forma en que los editores de imágenes mezclan capas — aplicando un tinte a una foto, creando un efecto duotono o difuminando una textura en otra — sin modificar los archivos de imagen.

Esta página explica qué hace cada modo de mezcla, cómo funciona la mezcla cuando un elemento tiene varias capas de fondo, casos de uso reales y ejemplos ejecutables. El valor predeterminado es normal, lo que significa que no hay mezcla.

Referencia de la propiedad


Valor inicial	`normal`
Se aplica a	Todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredado	No
Animable	No
Versión	CSS3
Sintaxis DOM	`object.style.backgroundBlendMode = "luminosity"`

Sintaxis

background-blend-mode: <blend-mode>;

/* Multiple layers */
background-blend-mode: <blend-mode>, <blend-mode>, ...;

Donde <blend-mode> es uno de:

normal | multiply | screen | overlay | darken | lighten |
color-dodge | color-burn | hard-light | soft-light |
difference | exclusion | hue | saturation | color | luminosity

Cómo funciona la mezcla en capas

Un elemento puede apilar múltiples capas de fondo: la lista de background-image, más el background-color pintado debajo de todas ellas. background-blend-mode acepta una lista de modos separados por comas que corresponden, en orden, a las capas de background-image:

Si se especifican menos modos que capas, la lista se repite desde el inicio hasta que cada capa tenga un modo.
Si se especifican más modos que capas, los modos sobrantes se ignoran.
El background-color es siempre la capa más inferior y se mezcla con la capa de imagen directamente encima de él.

/* Two images: the first uses "screen", the second "multiply" */
background-image: url(top.png), url(bottom.png);
background-blend-mode: screen, multiply;

La mezcla ocurre solo entre los fondos del mismo elemento — no se mezcla con el contenido visualmente detrás del elemento en el contexto de apilamiento. Para mezclar un elemento con lo que se encuentra debajo de él en la página, usa mix-blend-mode en su lugar.

Valores

Valor	Qué hace
`normal`	Sin mezcla — la capa superior se pinta sobre las capas inferiores (predeterminado).
`multiply`	Multiplica los valores de los canales de color. El resultado es siempre más oscuro; el blanco es transparente, el negro permanece negro.
`screen`	Inverso de `multiply`. El resultado es siempre más claro; el negro es transparente, el blanco permanece blanco.
`overlay`	Aplica `multiply` donde la capa inferior es oscura y `screen` donde es clara — aumenta el contraste.
`darken`	Conserva el píxel más oscuro, canal por canal.
`lighten`	Conserva el píxel más claro, canal por canal.
`color-dodge`	Aclara la capa inferior para reflejar la capa superior, produciendo brillos vívidos.
`color-burn`	Oscurece la capa inferior para reflejar la capa superior, intensificando las sombras.
`hard-light`	Similar a `overlay` pero con los roles de las capas superior e inferior intercambiados — un fuerte aumento de contraste.
`soft-light`	Una versión más suave de `overlay`; conserva los tonos medios y evita bordes bruscos.
`difference`	Resta el color más oscuro del más claro por canal. Los colores idénticos producen negro.
`exclusion`	Similar a `difference` pero con menor contraste; los tonos medios se vuelven grises.
`hue`	Toma el matiz de la capa superior con la saturación y luminosidad de la capa inferior.
`saturation`	Toma la saturación de la capa superior con el matiz y la luminosidad de la capa inferior.
`color`	Toma el matiz y la saturación de la capa superior con la luminosidad de la capa inferior — la forma estándar de teñir una foto en escala de grises.
`luminosity`	Inverso de `color`: toma la luminosidad de la capa superior con el matiz y la saturación de la capa inferior.

Entendiendo las familias de modos de mezcla

Los 16 modos se agrupan en cuatro familias:

Modos de oscurecimiento (multiply, darken, color-burn) — el resultado nunca es más brillante que ninguna de las fuentes. Útiles para sombras, profundizar sombras y añadir tintes oscuros.

Modos de aclarado (screen, lighten, color-dodge) — el resultado nunca es más oscuro que ninguna de las fuentes. Útiles para brillos, filtraciones de luz y efectos de aclarado.

Modos de contraste (overlay, hard-light, soft-light) — oscurecen las áreas oscuras mientras aclaran las áreas claras, aumentando el contraste general. Soft-light es el más sutil; hard-light es el más agresivo.

Modos de diferencia/exclusión (difference, exclusion) — producen resultados invertidos o psicodélicos. Se usan principalmente para efectos creativos o animaciones; menos comunes en trabajo de interfaz de usuario.

Modos de componentes (hue, saturation, color, luminosity) — dividen un color en sus componentes HSL e intercambian canales individuales entre capas. Estos son los más utilizados para el recoloreado de fotos.

Ejemplos

normal

Sin mezcla — la imagen frontal se dibuja sobre la imagen trasera sin ninguna interacción entre ellas.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: normal;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

screen

Las áreas claras permanecen brillantes; las áreas oscuras de la imagen superior se vuelven transparentes, revelando la capa inferior. Ideal para añadir brillos o filtraciones de luz suave.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: screen;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

color-dodge

Aclara la capa inferior para reflejar la capa superior. Produce resultados vívidos y de alta clave. Útil para efectos de neón o destellos.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: color-dodge;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

multiply

Multiplica los valores de los canales de color, produciendo siempre un resultado más oscuro que cualquiera de las fuentes. Las áreas blancas se vuelven transparentes; las áreas negras permanecen negras. La opción clásica para añadir tintes o sombras a una foto.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: multiply;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

overlay

Aumenta el contraste aplicando multiply donde la capa inferior es oscura y screen donde es clara. Conserva el carácter tonal de la capa inferior haciéndola resaltar.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: overlay;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

darken

Compara cada canal de color y conserva el valor más oscuro. Las dos capas compiten píxel a píxel, y las partes más oscuras de cualquiera de las capas siempre ganan.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: darken;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

saturation

Toma la saturación de la capa superior mientras conserva el matiz y la luminosidad de la capa inferior. Útil para desaturar o resaturar partes de una foto manteniendo la paleta de colores.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: saturation;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Casos de uso comunes

Teñir una foto con el color de marca

Coloca un background-color sólido sobre una foto y usa multiply para dirigir la imagen hacia ese matiz. Las áreas oscuras de la foto absorben el tinte con mayor intensidad.

.hero {
  background-image: url(photo.jpg);
  background-color: #4f46e5; /* indigo brand color */
  background-blend-mode: multiply;
}

Crear un efecto duotono

Establece dos fondos de degradado — uno para los brillos y otro para las sombras — sobre una imagen en escala de grises usando screen y multiply:

.duotone {
  background-image:
    linear-gradient(#ff6b6b, #ff6b6b),  /* highlight color */
    linear-gradient(#4f46e5, #4f46e5),  /* shadow color */
    url(photo.jpg);
  background-blend-mode: screen, multiply, normal;
}

La foto en escala de grises recibe tanto una capa de brillo cálida (screen) como una capa de sombra fría (multiply), produciendo el clásico aspecto de dos tonos tan popular en las secciones hero.

Superposición de textura

Difumina una textura de ruido o papel sobre un color de fondo plano sin editar el archivo:

.textured-card {
  background-image: url(noise.png);
  background-color: #f5f0eb;
  background-blend-mode: soft-light;
}

soft-light suele ser la opción más suave aquí — añade textura sin lavar el color base.

Recolorado interactivo al pasar el cursor

Cambia el modo de mezcla dinámicamente para crear un efecto hover solo con CSS:

.card {
  background-image: url(photo.jpg);
  background-color: #10b981;
  background-blend-mode: normal;
  transition: background-blend-mode 0s; /* instant switch */
}

.card:hover {
  background-blend-mode: multiply;
}

Nota: background-blend-mode no es animable (sin estados intermedios), por lo que las transiciones cambian de forma instantánea en lugar de interpolarse.

Cuándo se necesita mezclar el elemento completo

background-blend-mode solo mezcla las capas dentro del propio fondo del elemento. Si necesitas mezclar un elemento con el contenido que hay detrás de él en la página — por ejemplo, una superposición de vidrio esmerilado — usa mix-blend-mode en su lugar.

Para ajustes de una sola imagen (brillo, contraste, escala de grises) donde no necesitas una segunda capa, la propiedad filter suele ser una solución más sencilla, y opacity es la herramienta adecuada para difuminar todo el elemento.

Compatibilidad con navegadores

background-blend-mode está soportado en todos los navegadores modernos (Chrome, Firefox, Edge, Safari y Opera). Internet Explorer nunca lo soportó. Proporciona un background plano sensato como alternativa para entornos heredados — los fondos sin mezcla renderizan las capas apiladas normalmente sin ningún error visible.

/* Fallback first, then enhanced */
.hero {
  background: url(photo.jpg) center / cover #4f46e5;
}

@supports (background-blend-mode: multiply) {
  .hero {
    background-blend-mode: multiply;
  }
}

Práctica

¿Qué hace la propiedad CSS background-blend-mode?

Define el modo de mezcla de la imagen de fondo y el color de fondo.Ajusta el tamaño de la imagen de fondo.Controla el desplazamiento de la imagen de fondo.Permite que múltiples imágenes de fondo se mezclen entre sí.Determina la posición de la imagen de fondo.