Modo de fusión
Método matemático para componer los valores de píxel de dos capas. Incluye modos como Multiplicar, Pantalla y Superponer para efectos visuales variados.
Un modo de fusión (también llamado modo de composición o dibujo) determina cómo los valores de píxel de una capa superior se combinan matemáticamente con los de una capa inferior para producir el color final mostrado. Popularizados por Photoshop en los años 90, los modos de fusión están ahora disponibles en CSS mediante mix-blend-mode y en la API Canvas 2D.
Modos de fusión clave y sus fórmulas (valores normalizados a 0-1):
- Multiplicar:
Resultado = A × B. Oscurece la imagen; útil para añadir sombras y superponer colores - Pantalla:
Resultado = 1 - (1-A)(1-B). Aclara la imagen; ideal para efectos de brillo y luces - Superponer: Aplica Multiplicar a áreas oscuras y Pantalla a áreas claras. Mejora el contraste preservando los tonos medios
- Luz suave: Una versión más sutil de Superponer. Produce ajustes tonales naturales sin transiciones bruscas
- Diferencia:
Resultado = |A - B|. Revela diferencias entre dos imágenes; usado en detección de cambios
Aplicaciones prácticas incluyen:
- Composición de texturas: Superponer texturas de papel o lienzo en modo Multiplicar para añadir calidad táctil
- Gradación de color: Usar Luz suave con capas de color para lograr tonos cinematográficos
- Composición de logotipos: El modo Pantalla elimina naturalmente fondos negros de los logotipos
En CSS, mix-blend-mode controla la fusión entre elementos, mientras que background-blend-mode fusiona múltiples imágenes de fondo dentro de un solo elemento. Ambos están acelerados por GPU, permitiendo efectos interactivos en tiempo real sin sobrecarga de cálculo JavaScript.