Mix-blend-mode - Trucos CSS | Almanaque CSS 2024

La mix-blend-modepropiedad define cómo el contenido de un elemento debe combinarse con su fondo. Por ejemplo, el texto de un

podría mezclarse con el fondo detrás de él de formas interesantes.

.blend ( mix-blend-mode: exclusion; )

En el ejemplo anterior, el contenido ha sido modificado por el mix-blend-modepara que los colores del texto se excluyan de su fondo. Este es solo uno de los muchos valores de esta propiedad.

Hay un problema con Chrome 58+ en el mix-blend-modeque no se procesa en elementos que están configurados en transparente . El ha sido etiquetado como Problema 711955 en Chrome, que está asignado al momento de escribir este artículo. Mientras tanto, una solución simple es asignar un color de fondo blanco (o realmente, cualquiera) al elemento del cuerpo.

Valores

initial: la configuración predeterminada de la propiedad que no establece un modo de mezcla.
inherit: un elemento heredará el modo de fusión de su elemento padre.
unset: elimina el modo de fusión actual de un elemento.
: este es el atributo de uno de los modos de fusión siguientes:
normal: este atributo no aplica mezcla alguna.
multiply: el elemento se multiplica por el fondo y reemplaza el color de fondo. El color resultante es siempre tan oscuro como el fondo.
screen: multiplica el fondo y el contenido luego complementa el resultado. Esto dará como resultado un contenido más brillante que el background-color.
superposición: multiplica o filtra el contenido según el color de fondo. Este es el inverso del modo de mezcla de luz dura.
oscurecer: el fondo se reemplaza con el contenido donde el contenido es más oscuro, de lo contrario, se deja como estaba.
lighten: el fondo se reemplaza con el contenido donde el contenido es más claro.
color-dodge: este atributo ilumina el color de fondo para reflejar el color del contenido.
color-burn: esto oscurece el fondo para reflejar el color natural del contenido.
hard-light: dependiendo del color del contenido este atributo lo filtrará o lo multiplicará.
soft-light: dependiendo del color del contenido este lo oscurecerá o aclarará.
difference: esto resta el más oscuro de los dos colores del color más claro.
exclusion: similar a differencepero con menor contraste.
hue: crea un color con el tono del contenido combinado con la saturación y luminosidad del fondo.
saturation: crea un color con la saturación del contenido combinado con el tono y luminosidad del fondo.
color: crea un color con la tonalidad y saturación del contenido y la luminosidad del fondo.
luminosity: crea un color con la luminosidad del contenido y la tonalidad y saturación del fondo. Este es el inverso del coloratributo.

Vale la pena señalar que establecer un modo de combinación distinto de normalgenerará un nuevo contexto de apilamiento que luego debe combinarse con el contexto de apilamiento que contiene el elemento.

El efecto de estos valores se muestra en la siguiente demostración:

Más información

Conceptos básicos de los modos de fusión de CSS
mix-blend-mode en MDN
mix-blend-mode en W3C
Una colección de demostraciones de CSS Blend Mode
Conociendo los modos de fusión CSS

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.