CSS: Modos de fusión

Los modos de fusión o modos de mezcla son una metodología introducida en CSS para calcular el color final de un píxel cuando dos capas se superponen. Se trata de una característica muy habitual en los programas de edición de imágenes o de retoque fotográfico en la que se fusiona dos capas.

En CSS, las capas son elementos HTML. En este sentido, los modos de fusión permiten controlar la forma en la que se combinan los colores entre dos elementos cuando uno está encima del otro. Por tanto, determinan cómo se mezclan los colores del contenido del elemento superior con los del elemento inferior.

Se puede resumir que los modos de fusión son una herramienta muy interesante de cara a diseñadores web y desarrolladores que deseen crear bonitos efectos visuales sin tener que recurrir a herramientas externas de edición gráfica.

Existe una serie de propiedades CSS que implementan los modos de fusión y así poder utilizarlos en los elementos que sea más conveniente:

Lista de los modos de fusión

En las propiedades mix-blend-mode y background-blend-mode puede indicarse los nombres de los modos de fusión que se utilizará en la combinación. La diferencia entre una propiedad y la otra es que mix-blend-mode realizará la fusión entre dos elementos HTML, mientras que background-blend-mode combinará los colores entre dos fondos declarados mediante la propiedad background.

Lista de los modos de fusión:

Vamos a conocerlos con más detalle.

Con el modo normal no se aplica ningún modo de fusión. Se trata del valor por defecto para las dos propiedades CSS *-blend-mode. En este modo, el color resultante es el de la capa que está por encima.

Código CSS:

.contenedor {
  background: #ff7f2a;
  display: inline-block;
  padding: 10px;
}

.normal {
  mix-blend-mode: normal;
}

Resultado:

normal

Usando el modo multiply se multiplica los colores de los elementos que están superpuestos. Como resultado, el color del píxel será más oscuro. Si hay una capa negra, el píxel será negro, y si hay una capa blanca no habrá cambios en el color. Es como sobreponer dos imágenes en papel transparente.

El valor screen produce un efecto inverso al de multiplicar los colores. Lo que hace en realidad es multiplicarlos y luego los invierte. Si hay una capa negra no habrá cambios en el color, y si hay una capa blanca, el píxel será blanco. Por tanto, a diferencia del anterior, el resultado se hace más claro.

Código CSS:

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

.screen {
  mix-blend-mode: screen;
}

Resultado:

multiply

screen

El modo de fusión overlay es una combinación de los dos modos anteriores. Si el color del elemento inferior es más oscuro se aplica el modo multiply. En cambio, si el color del elemento inferior es más claro se aplica screen.

Código CSS:

.overlay {
  mix-blend-mode: overlay;
}

Resultado:

overlay

Con el modo darken se mantiene el color más oscuro de los dos elementos superpuestos, por tanto el píxel final es el más oscuro de los dos. Por su parte, el modo lighten es el caso inverso del anterior: mantiene el color más claro de los dos elementos superpuestos, dando un resultado más claro.

Código CSS:

.darken {
  mix-blend-mode: darken;
}

.lighten {
  mix-blend-mode: lighten;
}

Resultado:

darken

lighten

Usando el modo de fusión color-dodge, el color del píxel del elemento subyacente se aclara para reflejar el color del elemento que está por encima. En cambio, el modo de fusión color-burn oscurece el color del píxel del elemento subyacente para reflejar el color del elemento que está por encima.

Código CSS:

.color-dodge {
  mix-blend-mode: color-dodge;
}

.color-burn {
  mix-blend-mode: color-burn;
}

Resultado:

color-dodge

color-burn

El modo de fusión hard-light es similar a multiply o screen, según si el color del elemento superior es más oscuro o menos oscuro. El resultado es parecido a encender un foco de luz en el fondo. Por su parte, el modo soft-light es similar a hard-light, pero busca el color menos oscuro.

Código CSS:

.hard-light {
  mix-blend-mode: hard-light;
}

.soft-light {
  mix-blend-mode: soft-light;
}

Resultado:

hard-light

soft-light

Mediante el modo de fusión difference se resta los colores de los elementos superpuestos, dando como resultado un contraste mayor. En cambio, utilizando el modo de fusión exclusion también se resta los colores de los elementos superpuestos, pero en este caso se obtiene un contraste menor.

Código CSS:

.difference {
  mix-blend-mode: difference;
}

.exclusion {
  mix-blend-mode: exclusion;
}

Resultado:

difference

exclusion

El modo hue combina colores basándose en el tono (matiz): conserva el matiz del color superior y usa la saturación y luminosidad del color inferior.

El modo saturation usa la saturación del color del elemento superior, mientras utiliza el matiz y la luminosidad del color del elemento inferior.

Código CSS:

.hue {
  mix-blend-mode: hue;
}

.saturation {
  mix-blend-mode: saturation;
}

Resultado:

hue

saturation

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

Finalmente, el modo de fusión luminosity combina los colores basándose en la luminosidad, es decir, que usa la luminosidad del color del elemento superior, mientras usa el matiz y la saturación del color del elemento inferior.

Código CSS:

.color {
  mix-blend-mode: color;
}

.luminosity {
  mix-blend-mode: luminosity;
}

Resultado:

color

luminosity

Tal y como se puede apreciar, la lista de modos de fusión es tan extensa que ofrece una amplia gama de posibilidades de tipo creativo.

La propiedad ‘mix-blend-mode’

La propiedad mix-blend-mode permite combinar los colores de un elemento con los colores de los elementos subyacentes o inferiores. Como valor se indica el modo de fusión que se debe aplicar. El valor por defecto de esta propiedad CSS es normal, con el que prevalece el color del elemento superior.

Algunos ejemplos de uso:

.ejemplo { mix-blend-mode: normal; }
.ejemplo { mix-blend-mode: multiply; }
.ejemplo { mix-blend-mode: overlay; }
.ejemplo { mix-blend-mode: darken; }
.ejemplo { mix-blend-mode: lighten; }
.ejemplo { mix-blend-mode: color; }

En el siguiente ejemplo vamos a crear un contenedor que tenga un degradado de color de fondo, y le vamos a poner encima una estrella vectorial (formato SVG) que es totalmente negra. Le aplicamos el modo de fusión soft-light.

Código CSS:

.degradado {
  background: linear-gradient(teal, #ff7f2a);
  display: inline-block;
  padding: 10px;
}

.estrella {
  mix-blend-mode: soft-light;
}

Resultado:

La propiedad ‘background-blend-mode’

La propiedad background-blend-mode permite combinar los colores de las distintas capas definidas con la propiedad background. Como valor admite el nombre del modo de fusión que se debe aplicar. Puede indicarse una lista de varios valores separados con una coma (,). El valor por defecto es normal.

Algunos ejemplos de uso:

.ejemplo { background-blend-mode: normal; }
.ejemplo { background-blend-mode: multiply; }
.ejemplo { background-blend-mode: exclusion; }
.ejemplo { background-blend-mode: saturation; }
.ejemplo { background-blend-mode: hue, darken; }
.ejemplo { background-blend-mode: luminosity; }

En el siguiente ejemplo creamos un elemento que tiene como imagen de fondo dos archivos SVG que se encuentran por encima del degradado. A la estrella le aplicamos el modo soft-light y a la esfera le aplicamos hue.

Código CSS:

.degradado {
  background:
    url("/images/css/ast.svg") no-repeat 50% 50%,
    url("/images/css/sun.svg") no-repeat 50% 50%,
    linear-gradient(deepskyblue, #ff2a2a);
  background-blend-mode: soft-light, hue;
  background-size: 90%, 55%, 100%;
  display: inline-block;
  height: 120px;
  width: 120px;
}

Resultado:

La propiedad ‘isolation’

La propiedad isolation permite controlar la forma en la que el contenido de un elemento determinado interactúa con otros elementos en términos de apilamiento. Se puede indicar si el elemento en cuestión debe estar en un contexto de apilamiento aislado. Su valor por defecto es auto.

Valores de la propiedad isolation: