<blend-mode>

Resumen

El tipo <blend-mode> es una coleccion de palabras clave que describen modos de mezcla.

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.

Sintaxis

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

Valores posibles

normal

El color final es el de la capa superior, sin importar el color de fondo.
El efecto es similar a dos trozos de papel sobrepuestos.

<div id="div"></div>

#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;
}

multiply

El color final es el resultado de multiplicar el color superior y el inferior.
Una capa negra conduce a una capa final negra, y una capa blanca lleva a que no haya cambios.
El efecto ese similar a dos imágenes impresas en papel transparente sobrepuestas.

<div id="div"></div>

#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;
}

screen

El color final ees el resultado de invertir los colores, multiplicándolos e invirtiendo el valor resultante.
Una capa negra no produce cambio alguno, y una capa blanca conduce a una capa blanca final.
El efecto es similar a dos imágenes mostrándose desde un proyector.

<div id="div"></div>

#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;
}

overlay

El color final es el resultado de multiply si el color inferior es más oscuro, o screen si el color inferior es más claro.
Este modo de mezcla es equivalente a hard-light, pero si las capas son intercambiadas.

<div id="div"></div>

#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;
}

darken

El resultado final es un color compuesto de los valores más oscuros por cada canal de color.

<div id="div"></div>

#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;
}

lighten

El resultado final es un color compuesto de los valores más claros por cada canal de color.

<div id="div"></div>

#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;
}

color-dodge

El color final es el resultado de dividir el color inferior por el inverso del color superior.
Un fondo negro no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce un color completamente iluminado.
Este modo de mezcla es similar a screen, 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.

<div id="div"></div>

#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;
}

color-burn

El color final es el resultado de invertir el color de fondo, dividier el valor por el color superior, e invertir ese valor.
Un fondo blanco no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce una imagen negra.
Este modo de mezcla es similar a multiply, 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.

<div id="div"></div>

#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;
}

hard-light

El color final es el resultado de multiply si el color superior es más oscuro, o screen si el color superior es más oscuro.
Este modo de mezcla es equivalente a overlay, pero con las capas intercambiadas.
El efecto es similar a encender un foco con mucha intensidad en el fondo.

<div id="div"></div>

#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;
}

soft-light

El color final es similar a hard-light, pero más suave.
Este modo de mezcla se comporta similar a hard-light.
El efecto es similar a encender un foco difuso en el fondo.

<div id="div"></div>

#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;
}

difference

El color final es elresultado de restar el color más oscuro de las dos capas, del más claro.
Una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.

<div id="div"></div>

#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;
}

exclusion

El color final es similar a difference, pero con menor contraste.
Así como con difference,  una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.

<div id="div"></div>

#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;
}

hue

El color final tiene el matiz del color superior, mientras usa la saturación y luminosidad del color inferior.

<div id="div"></div>

#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;
}

saturation

El color final tiene la saturación del color superior, mientras usa el matiz y luminosidad del color inferior.
Un fondo gris puro, que no tenga saturación, no producirá efecto alguno.

<div id="div"></div>

#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;
}

color

El color final tiene el matiz y saturación del color superior, mientras usa la luminosidad del color inferior.
El efecto preserva los niveles de grid y puede ser usado para colorear el primer plano.

<div id="div"></div>

#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;
}

luminosity

El color final tiene la luminosidad del color superior, mientras usa el matiz y saturación del color inferior.
Este modo de mezcla es equivalente a color, pero con las capas intercambiadas.

<div id="div"></div>

#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;
}

Interpolación de modos de mezcla

Los cambios entre modos de mezcla no son interpolados. Cualquier cambio ocurrirá abruptamente.

Especificaciones

Compatibilidad de navegadores

Véase también

• Propiedades que usan valores de este tipo: background-blend-mode y mix-blend-mode
• Blend modes
• Índice de Referencia CSS