El mix blend mode en CSS moderno te permite mezclar los colores de un elemento con el fondo para crear efectos visuales como perforaciones, brillos intensos o quemaduras de color. Es una herramienta ideal si diseñas tarjetas emocionales y quieres llevar la creatividad visual un paso más allá.

Aquí vas a ver cómo aplicar dos de los valores más llamativos de esta propiedad: plus-lighter y color-burn. Cada uno produce un resultado muy distinto, y juntos demuestran el potencial real de esta técnica.

¿Qué es mix blend mode y para qué sirve en CSS?

Es una propiedad de CSS que define cómo el contenido de un elemento se mezcla con el fondo o con las capas que están detrás. En lugar de aplicar un color plano, los píxeles se combinan siguiendo una fórmula específica según el modo elegido.

¿Qué hace mix blend mode? Mezcla los colores de un elemento con los del fondo siguiendo una regla de composición. El resultado depende del modo que elijas, como plus-lighter o color-burn.

En el ejemplo de la clase, partimos de dos tarjetas duplicadas para comparar lado a lado los efectos. Una recibe plus-lighter y la otra color-burn.

¿Cómo se aplica plus lighter para iluminar una tarjeta?

El valor plus-lighter aumenta el brillo del elemento al sumarlo con el fondo. El resultado es una tarjeta que se ve mucho más iluminada y que parece perforar visualmente la superficie sobre la que está [1:08].

La sintaxis básica es directa:

css .plus-lighter { mix-blend-mode: plus-lighter; }

Para exagerar el efecto, conviene ajustar dos detalles del diseño:

• Cambiar el color de la letra a negro para que el contraste con el fondo sea mayor.
• Reducir el filtro grayscale para que los colores originales se mantengan vivos.
• Mantener un fondo con color fuerte detrás de la tarjeta.

Con estos ajustes, el efecto iluminado se nota mucho más y la tarjeta gana profundidad sin necesidad de sombras complejas.

¿Cómo funciona color burn y cuándo conviene usarlo?

El valor color-burn hace lo opuesto: oscurece y satura los colores, simulando que el color se quema sobre el fondo. El texto deja de comportarse como un color sólido y empieza a verse transparente, como si estuviera calado en la tarjeta [2:15].

css .color-burn { mix-blend-mode: color-burn; }

Para que el efecto se aprecie bien, el fondo necesita un color fuerte. Probando con un azul intenso, la letra parece recortada y deja pasar el color del fondo a través de ella. Si pruebas con negro puro, el resultado se vuelve casi opaco; con tonos menos intensos, los colores del fondo se filtran y la mezcla se nota más rica.

¿Qué diferencia hay entre plus lighter y color burn? Plus-lighter suma luz y aclara la tarjeta, mientras que color-burn oscurece y crea un efecto de letra calada que deja ver el fondo a través del texto.

Un detalle importante: si tienes un blur aplicado sobre el fondo, el efecto de calado puede suavizarse. Quitarlo hace que la transparencia del texto se vea más nítida, aunque también puede comprometer la legibilidad. Es un balance creativo que tú decides según el diseño.

¿Qué otros valores de mix blend mode puedo probar?

Estos dos son solo el comienzo. Si abres el autocompletado de Visual Studio Code sobre la propiedad mix-blend-mode, vas a ver una lista completa de modos disponibles [3:42]. Algunos producen efectos parecidos, otros son completamente distintos.

Entre los más útiles para tarjetas emocionales están:

• hard-light, que también genera un efecto iluminado pero con más contraste.
• lighten, que aclara y da sensación de perforación similar a plus-lighter.
• plus-lighter, una de las opciones más nuevas y la que mejor respeta los colores del fondo con un brillo intenso.

La recomendación es probar cada modo con tu paleta y tu fondo. El mismo valor puede dar resultados muy distintos dependiendo de los colores que tengas detrás, así que vale la pena experimentar antes de cerrar la decisión.

¿Cómo combinar mix blend mode con otros estilos para más impacto?

La magia aparece cuando combinas estos modos con otras propiedades. Ajustar el color del texto, el fondo de la tarjeta, los filtros como grayscale o blur, y el contraste general te da control total sobre el resultado final.

Algunas combinaciones que funcionan bien:

• Texto en negro + plus-lighter + fondo con color saturado para máxima iluminación.
• Texto + color-burn + fondo azul o magenta para un efecto de letra perforada.
• Reducir filtros previos para que los modos de mezcla muestren todo su potencial.

La idea es que tengas libertad absoluta para iterar. No hay una receta única, y muchas veces el mejor resultado aparece cuando pruebas un modo que no esperabas usar.

¿Qué combinación de mix-blend-mode y fondo vas a probar primero en tus tarjetas? Cuéntame en los comentarios qué efecto buscas lograr.