¿Qué son los Blend Modes en CSS?

Los Blend Modes en CSS son una propiedad, de reciente incorporación, llamada mix-blend-mode, que permite diferentes valores, como por ejemplo para oscurecer, aclarar o contrastar, entre otros modos. Estos valores permiten mezclar el color de fondo de un elemento con el color del elemento superpuesto, que puede ser un texto o un contenedor.

Tipos de Blend Modes y sus efectos visuales

multiply

Multiplica los colores de la capa superior con los de la capa inferior.

– Oscurece la imagen resultante.

screen

Invierte los colores de la capa superior y los multiplica con los de la capa inferior.

– Aclara las áreas de la imagen.

overlay

Combina Multiply y Screen, oscureciendo o aclarando la capa inferior dependiendo de sus colores.

– Produce un efecto de contraste y saturación en la imagen resultante.

darken

Conserva los colores más oscuros de las dos capas.

– Selecciona el color más oscuro de cada píxel de ambas capas.

lighten

Conserva los colores más claros de las dos capas.

– Selecciona el color más claro de cada píxel de ambas capas.

color-dodge

Aclara los colores de la capa inferior dependiendo de los colores de la capa superior.

– Aclara las áreas de la imagen de la capa inferior.

color-burn

Oscurece los colores de la capa inferior dependiendo de los colores de la capa superior.

– Oscurece las áreas de la imagen de la capa inferior.

difference

Resta los colores de la capa superior de los de la capa inferior.

– Produce un efecto de inversión de colores.

exclusion

Similar a Difference, pero con una apariencia menos extrema.

– Combina los colores de ambas capas con un efecto de exclusión.

hard-light

Combina Multiply y Screen, pero de una manera más intensa.

– Produce un efecto más fuerte de contraste y saturación.

soft-light

Similar a Overlay, pero con una apariencia más suave.

– Produce un efecto más suave de contraste y saturación.

hue

Preserva el brillo y la saturación de la capa inferior, pero adopta el tono de la capa superior.

– Aplica el tono de la capa superior a la capa inferior.

saturation

Preserva el brillo y el tono de la capa inferior, pero adopta la saturación de la capa superior.

– Aplica la saturación de la capa superior a la capa inferior.

color

Preserva el brillo de la capa inferior, pero adopta el tono y la saturación de la capa superior.

– Aplica el tono y la saturación de la capa superior a la capa inferior.

luminosity

Preserva el tono y la saturación de la capa inferior, pero adopta el brillo de la capa superior.

– Aplica el brillo de la capa superior a la capa inferior.

Implementación de Blend Modes en CSS

Para aplicar Blend Modes se utiliza la propiedad mix-blend-mode, que permite mezclar los colores de un elemento con los colores del fondo o de otros elementos superpuestos.

Compatibilidad de la propiedad CSS mix-blend-mode con los navegadores

Es recomendable verificar la compatibilidad utilizando herramientas como Can I Use. Los navegadores modernos generalmente admiten la mayoría de los modos de mezcla, pero es posible que encuentres limitaciones en navegadores más antiguos o menos comunes.