ManzDev
Perfil de Manz Dashboard de actividad
HTML5 Etiquetas HTML
CSS CSS vanilla
PostCSS Transformador CSS
Javascript Javascript ES2020+
NPM Node Package Manager
WebComponents Componentes web
Terminal Terminal de GNU/Linux
VueJS Framework VueJS 3
Automatizadores Empaquetadores Javascript
Youtube Canal de Youtube
Twitch Canal de Twitch
Telegram Canal de Telegram
Discord Servidor de Discord

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 Streamer de código. Amante del CSS y de la plataforma web en general. Autor de Emezeta.com tiempo atrás. Ha trabajado como profesor en la Universidad de La Laguna y es director del curso de Programación web FullStack y FrontEnd de EOI en Tenerife. En sus ratos libres, busca GIF de gatos en Internet.