Modos de fusión CSS

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.

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)

Si no tenemos ningún modo de fusión aplicado, el valor por defecto de la propiedad es normal. Como ejemplo, a continuación tenemos una imagen de Smudge aplicado con un modo de fusión sobre un fondo rojo. Puedes mover el ratón por encima de él para comparar la fotografía sin modo de fusión:

Podemos hacer uso de la propiedad isolation con valor auto o isolate, para que, en el último caso, se proteja un elemento de la mezcla de fusión y aislarlo sin que se aplique.

Nota: Lo mismo que hemos hecho en el ejemplo anterior con una imagen y un color de fondo, se podría hacer con 2 o varias imágenes.

El soporte de estas propiedades en navegadores modernos es relativamente bueno, como se ve a continuación en la siguiente tabla:

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.