<blend-mode>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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.

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.

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.

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.

darken

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

lighten

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

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.

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.

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.

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.

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.

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.

hue

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

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.

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.

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.

Ejemplos

Ejemplo usando `normal`

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

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: normal;
}

Ejemplo usando `multiply`

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

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: multiply;
}

Ejemplo usando `screen`

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

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}

Ejemplo usando `overlay`

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

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: overlay;
}

Ejemplo usando `darken`

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

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: darken;
}

Ejemplo usando `lighten`

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

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: lighten;
}

Ejemplo usando `color-dodge`

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

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-dodge;
}

Ejemplo usando `color-burn`

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

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-burn;
}

Ejemplo usando `hard-light`

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

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hard-light;
}

Ejemplo usando `soft-light`

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

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: soft-light;
}

Ejemplo usando `difference`

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

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: difference;
}

Ejemplo usando `exclusion`

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

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: exclusion;
}

Ejemplo usando `hue`

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

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hue;
}

Ejemplo usando `saturation`

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

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: saturation;
}

Ejemplo usando `color`

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

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color;
}

Ejemplo usando `luminosity`

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

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("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

Specification
Compositing and Blending Level 2 # ltblendmodegt

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también

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