mix-blend-mode: los modos separables y los que no lo son · CSS Moderno

Los modos de fusión vienen de la edición de imagen y llegaron a CSS con las mismas dieciséis fórmulas y la misma clasificación. Doce operan canal a canal y cuatro operan sobre el color como una unidad, y esa distinción no es una curiosidad: decide qué modos sirven para teñir sin destruir el detalle y cuáles no. Aquí están las fórmulas, y la explicación de qué mira cada uno.

🎯 Al terminar esta lección sabrás

Definir qué es un modo separable y por qué la mayoría lo son.
Reconocer las cuatro familias de modos separables por su comportamiento.
Usar los cuatro modos no separables y saber qué toman de cada capa.
Distinguir mix-blend-mode de background-blend-mode.

Separable quiere decir canal a canal

Un modo de fusión es una función que toma el color del elemento —la fuente— y el color de lo que hay debajo —el backdrop— y devuelve un color.

Un modo separable aplica la misma función escalar a cada canal por separado: el rojo del resultado solo depende del rojo de la fuente y del rojo del backdrop, y lo mismo para verde y azul. Doce de los dieciséis lo son.

Un modo no separable necesita los tres canales a la vez, porque calcula magnitudes que solo tienen sentido sobre el color completo, como la saturación o el tono. Son cuatro.

Los doce separables, por familias

Los que oscurecen. El resultado nunca es más claro que el más claro de los dos.

Modo	Fórmula	Notas
`multiply`	`B * S`	Blanco es neutro. Como superponer dos transparencias
`darken`	`min(B, S)`	Se queda con el más oscuro por canal
`color-burn`	`1 - min(1, (1 - B) / S)`	Muy agresivo. Con negro da negro

Los que aclaran. El resultado nunca es más oscuro que el más claro de los dos. Son los duales de los anteriores.

Modo	Fórmula	Notas
`screen`	`1 - (1 - B) * (1 - S)`	Negro es neutro. Como sumar dos proyecciones
`lighten`	`max(B, S)`	Se queda con el más claro por canal
`color-dodge`	`min(1, B / (1 - S))`	Dual de `color-burn`

Los de contraste. Aplican una fórmula distinta según que el otro operando esté por encima o por debajo de 0.5. overlay decide mirando el backdrop, hard-light mirando la fuente: son la misma operación con los papeles intercambiados. soft-light es una versión suavizada que no produce los cortes duros de hard-light.

Los de diferencia. difference da el valor absoluto de la resta, con lo que dos colores iguales dan negro y superponer blanco invierte. exclusion es una versión de menor contraste que produce grises en la zona media.

El uso práctico más frecuente de esta familia es texto que se lee sobre cualquier fondo:

.marca-agua {
  color: #ffffff;
  mix-blend-mode: difference;
}

Sobre fondo negro el texto queda blanco; sobre fondo blanco queda negro; sobre cualquier cosa intermedia, su inverso. Es la única forma de garantizar contraste sobre un fondo desconocido sin medirlo.

Los cuatro no separables

Estos cuatro descomponen ambos colores en tres atributos —tono, saturación y luminosidad— y recombinan tomando unos de la fuente y otros del backdrop:

Modo	Toma de la fuente	Toma del backdrop
`hue`	Tono	Saturación y luminosidad
`saturation`	Saturación	Tono y luminosidad
`color`	Tono y saturación	Luminosidad
`luminosity`	Luminosidad	Tono y saturación

color y luminosity son complementarios y son los dos que se usan de verdad.

color tiñe conservando todo el detalle de luces y sombras del backdrop. Es la forma correcta de colorear una fotografía en blanco y negro o de aplicar un tinte de marca a una imagen sin aplastarla.

.foto-tenida::after {
  content: "";
  position: absolute;
  inset: 0;
  background: oklch(55% 0.15 264);
  mix-blend-mode: color;
}

luminosity hace lo contrario: impone el detalle de la fuente sobre el color del backdrop. Superponer una imagen en luminosity sobre un rectángulo de color produce una duotonía limpia.

Un detalle técnico que explica algunos resultados raros: la especificación define la luminosidad de estos modos como 0.3 * R + 0.59 * G + 0.11 * B, con los coeficientes de la televisión analógica y sobre valores ya codificados con gamma. No es la luminancia relativa de WCAG, ni la claridad de OKLCH, ni nada perceptualmente correcto. Es la fórmula que había en los años ochenta, congelada en la especificación por compatibilidad con los editores de imagen que la implementaron primero.

mix-blend-mode y background-blend-mode

Dos propiedades con nombre casi idéntico y ámbitos completamente distintos.

background-blend-mode mezcla las capas de fondo de un elemento entre sí y con su color de fondo. Todo ocurre dentro del pintado de ese elemento. No ve nada de lo que hay detrás, no crea contexto de apilamiento y no tiene ninguna implicación de rendimiento más allá de la propia mezcla.

.textura {
  background-image: url(ruido.png), linear-gradient(in oklch, #89b4fa, #f38ba8);
  background-blend-mode: overlay;
}

mix-blend-mode mezcla el elemento entero con lo que hay detrás de él en la página. Crea contexto de apilamiento, obliga a componer el elemento aparte, y su comportamiento depende de dónde estén las fronteras de aislamiento, que es el asunto de la lección siguiente.

La regla para elegir: si lo que quieres mezclar está dentro del mismo elemento, background-blend-mode; si está en elementos distintos, mix-blend-mode. El primer instinto suele ser el segundo, y muchas veces el primero era suficiente y mucho más barato.

ℹ️

Existen también plus-lighter y plus-darker

Además de los dieciséis clásicos, la especificación de composición define plus-lighter, que suma los dos colores premultiplicados y recorta, y plus-darker. plus-lighter es el modo que usan las transiciones de vista para cruzar dos capturas sin que el punto medio se oscurezca, y es útil siempre que necesites un cruce de dos capas cuya suma tenga que conservar la luminosidad total.

⚡

La fusión ocurre en el espacio del dispositivo, y por eso multiply no es multiplicar luz

Hay una asimetría entre lo que estos modos prometen y lo que hacen que se nota en cuanto los usas en serio. multiply se explica siempre como “superponer dos transparencias”, y esa analogía es física: dos filtros que dejan pasar el 50% de la luz cada uno dejan pasar el 25%, que es el producto de las transmitancias. Pero la especificación aplica el producto sobre los valores codificados con gamma, no sobre la luz. Multiplicar 0.5 por 0.5 en sRGB codificado da 0.25 codificado, que en luz es aproximadamente 0.05, mientras que el producto físico de dos transmitancias del 21.4% —que es lo que 0.5 codificado significa en luz— sería 4.6%, es decir 0.046 en luz, o unos 0.24 codificados. Los números salen parecidos por casualidad en el gris medio y divergen en los extremos, y sobre todo divergen entre canales, con lo que el resultado de multiplicar dos colores saturados tiene un tono distinto del que tendría el resultado físico. Lo mismo, con signo contrario, pasa con screen. La consecuencia práctica es que estos modos no sirven para simular iluminación de forma correcta, y sí sirven perfectamente para lo que se inventaron: componer capas en un editor de imagen donde lo que importa es que el artista tenga un control predecible. Hay dos escapes cuando la corrección importa. Uno es hacer la mezcla en un espacio lineal con color-mix(in srgb-linear, ...), que sí es luz de verdad, aunque solo sirve para colores y no para capas enteras. El otro es un filtro de SVG con feBlend y color-interpolation-filters="linearRGB", que es la única forma de tener fusión en luz lineal sobre contenido arbitrario. Ninguna de las dos es cómoda, y por eso casi nadie las usa; lo importante es saber que el modo multiply de CSS es una convención de edición gráfica y no un modelo óptico, y no pedirle que se comporte como tal.

⚔️ Fusiona con criterio

Superpón texto blanco con difference sobre un fondo con zonas claras y oscuras.
Tiñe una fotografía con color y compárala con superponer el mismo color al 40% de opacidad.
Haz una duotonía con luminosity sobre un rectángulo de color.
Sustituye un mix-blend-mode entre dos elementos por un background-blend-mode en uno solo.
Multiplica dos colores saturados y compara el resultado con color-mix(in srgb-linear, ...).