Blend modes

Aprende a mezclar capas visuales en CSS con mix-blend-mode y background-blend-mode. Los mismos modos de fusión de Photoshop, directamente en el navegador.

Los blend modes (modos de fusión) definen cómo se mezclan visualmente dos capas superpuestas. Si has usado Photoshop o Figma, los reconocerás: multiply, screen, overlay… El navegador los implementa directamente con CSS.

mix-blend-mode

Controla cómo se mezcla un elemento con los elementos que hay detrás de él:

Los modos más útiles

/* multiply: oscurece. El blanco es neutro — ideal para logos sobre fondos */
.logo {
  mix-blend-mode: multiply;
}

/* screen: aclara. El negro es neutro — ideal para luces y brillos */
.luz {
  mix-blend-mode: screen;
}

/* overlay: contraste. Aclara los claros, oscurece los oscuros */
.overlay {
  mix-blend-mode: overlay;
}

/* difference: inversión relativa. El clásico efecto "selección de texto" */
.cursor-custom {
  mix-blend-mode: difference;
}

/* color: aplica el matiz/saturación del elemento, mantiene la luminosidad del fondo */
.colorize {
  mix-blend-mode: color;
}

/* luminosity: aplica la luminosidad del elemento al color del fondo */
.luminosity {
  mix-blend-mode: luminosity;
}

Casos de uso prácticos

Overlay de color sobre imagen

Para añadir un tinte de color sobre una imagen sin modificarla:

<div class="imagen-wrapper">
  <img src="foto.jpg" alt="Foto" />
  <div class="color-overlay"></div>
</div>

.imagen-wrapper {
  position: relative;
}
.color-overlay {
  position: absolute;
  inset: 0;
  background: #4f46e5;
  mix-blend-mode: color;
  opacity: 0.8;
}

Cursor personalizado con difference

Un clásico del diseño interactivo: el cursor invierte los colores del fondo donde pase:

.cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9999;
}

Texto que “corta” el fondo

.hero {
  background: url('imagen.jpg') center/cover;
  position: relative;
}
.hero-title {
  position: relative;
  color: #000;
  background: white;
  mix-blend-mode: multiply;
  /* Con multiply, el blanco del bg actúa como ventana a la imagen */
}

background-blend-mode

Mientras mix-blend-mode mezcla el elemento con lo que hay detrás, background-blend-mode mezcla los fondos del propio elemento entre sí (cuando hay múltiples backgrounds o un background-color + background-image).

/* Mezcla una imagen con un color de fondo */
.card {
  background-image: url('textura.png');
  background-color: #4f46e5;
  background-blend-mode: multiply;
}

/* Múltiples imágenes de fondo mezcladas — un valor por capa */
.composite {
  background-image:
    url('capa-superior.png'),
    url('capa-inferior.jpg');
  background-blend-mode: screen, normal;
}

Efecto duotone

.duotone {
  background-image: url('foto.jpg');
  background-color: #4f46e5;
  background-blend-mode: luminosity;
}

isolation: aislar el contexto de mezcla

Por defecto, mix-blend-mode mezcla con todo lo que hay visualmente detrás, incluyendo el fondo del <body>. Con isolation: isolate en el contenedor, limitas la mezcla al interior:

.card {
  isolation: isolate; /* solo mezcla dentro de esta card */
}
.card .titulo {
  mix-blend-mode: overlay;
  /* ahora solo se mezcla con el fondo de .card, no con todo el documento */
}

Tabla de modos disponibles

Modo	Efecto
`normal`	Sin mezcla (por defecto)
`multiply`	Oscurece, blanco = neutro
`screen`	Aclara, negro = neutro
`overlay`	Contrasta, mezcla multiply y screen
`darken`	Mantiene el color más oscuro
`lighten`	Mantiene el color más claro
`color-dodge`	Aclara el fondo según el elemento
`color-burn`	Oscurece el fondo según el elemento
`hard-light`	Como overlay pero con capas invertidas
`soft-light`	Versión suave de overlay
`difference`	Diferencia matemática — inversión relativa
`exclusion`	Como difference pero más suave
`hue`	Matiz del elemento, saturación + brillo del fondo
`saturation`	Saturación del elemento, resto del fondo
`color`	Matiz + saturación del elemento, brillo del fondo
`luminosity`	Brillo del elemento, matiz + saturación del fondo

¿Qué hemos aprendido?

mix-blend-mode mezcla el elemento con los elementos detrás de él.
background-blend-mode mezcla los fondos del propio elemento entre sí.
isolation: isolate en el padre limita el contexto de mezcla.
difference y overlay son los modos más versátiles para efectos interactivos.

Siguiente paso

En la próxima lección veremos CSS Nesting nativo: anidar selectores directamente en CSS sin necesidad de Sass ni ningún preprocesador.