Modos de fusión CSS Mecanismos para fusionar y mezclar elementos – efectos de filtro

Los filtros CSS están muy bien en multitud de situaciones, pero hay casos en los que se nos pueden quedar cortos. Los modos de fusión son un interesante añadido que aparece en CSS para dotar de otra característica muy común en los programas de diseño y edición de imagen: la fusión de dos elementos sumando la información de color de los píxeles de cada uno de ellos.

Propiedades de fusión 

Mediante las propiedades mix-blend-mode y background-blend-mode podemos utilizar modos de fusión en los diferentes elementos que seleccionemos en una página web, aplicando composición para mezclar los colores, superponiendo dos elementos, consiguiendo una variación como resultado final.

Dichas propiedades son las siguientes:

Propiedad	Valor	Significado
mix-blend-mode	normal |	Aplica un modo de fusión específico a un elemento.
background-blend-mode	normal |	Aplica un modo de fusión específico a un fondo.
isolation	auto | isolate	Establece si un elemento debe aislarse del resto.

La diferencia entre ambas propiedades es que la primera de ellas, mix-blend-mode, se utiliza para elementos, mientras que la segunda, background-blend-mode, se utiliza para aplicar modos de fusión en fondos. Por ejemplo, usándola con una imagen:

body {
    background: green;
}

img {
    mix-blend-mode: multiply;
}

Entre los diferentes modos de fusión  que podemos utilizar en dichas propiedades, se encuentran las siguientes:

• multiply (multiplicar)
• screen (trama)
• overlay (superponer)
• darken (oscurecer)
• lighten (aclarar)
• color-dodge (sobreexponer color)
• color-burn (subexponer color)
• hard-light (luz fuerte)
• soft-light (luz suave)
• difference (diferencia)
• exclusion (exclusión)
• hue (tono)
• saturation (saturación)
• color
• luminosity (luminosidad)