Definición de .mix-blend-mode aplicado en CSS

La propiedad .mix-blend-mode define cómo el contenido de un elemento debe combinarse con sus antecedentes. Por ejemplo, el texto de A

podría combinarse con el fondo detrás de él de manera interesante.

Esta propiedad de CSS habitualmente se emplea de esta forma:

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

Otro ejemplo más avanzado de .mix-blend-mode es el siguiente de CODEPEN:

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

Valor	Descripción	Manifestación
normal	Esto es predeterminado. Establece el modo de fusión en normal
multiplicar	Establece el modo de fusión para multiplicar
pantalla	Establece el modo de fusión a la pantalla
cubrir	Establece el modo de fusión en superposición
oscurecer	Establece el modo de fusión para oscurecer
aligerar	Establece el modo de fusión para aclarar
esquivar el color	Establece el modo de fusión en color-dodge
color quemado	Establece el modo de fusión para quemar color
diferencia	Establece el modo de fusión a la diferencia
exclusión	Establece el modo de fusión a la exclusión
matiz	Establece el modo de fusión en tono
saturación	Establece el modo de fusión a saturación
color	Establece el modo de fusión en color.
luminosidad	Establece el modo de fusión en luminosidad.

Los números de la tabla detallan la primera versión del navegador que es completamente compatible con la propiedad.

Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.

Property	Chrome	Internet Explorer / Edge	Firefox	Safari	Opera
object-fit	31.0	16.0	36.0	7.1	19.0