Los Blend Modes, o modos de mezcla en español, son una característica de CSS que permite combinar elementos HTML con otros elementos de fondo como imágenes o degradados. Estos modos nos permiten mezclar los colores del fondo, que puede ser una imagen o un color, con el elemento que se superpone.
En este artículo, veremos los fundamentos de las Blend Modes, sus diferentes tipos y cómo implementarlas en CSS para crear efectos visuales.
1. ¿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.
Con las Blend Modes, podemos jugar con la transparencia y la opacidad de los elementos, logrando efectos de fusión, aclarado, superposición, saturación o contraste, entre otros.
2. Tipos de Blend Modes y sus efectos visuales
Veamos una tabla con los valores más destacados de la propiedad mix-blend-mode, su descripción y sus características.
| Blend Mode | Descripción | Características |
|---|---|---|
| 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. |
3. 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. Veamos cómo se implementa esta propiedad.
Sintaxis:
.contenedor-superpuesto {
mix-blend-mode: <modo-de-mezcla>;
}
Donde <modo-de-mezcla> es el valor del Blend Mode que quieres aplicar, como «multiply», «screen», «overlay», entre otros.
Ejemplo:
Por ejemplo, si quieres que un texto se mezcle con el fondo utilizando el modo «Multiply», crearías una regla CSS como esta:
.texto-superpuesto {
mix-blend-mode: multiply;
}
Es esencial tener en cuenta que para que los Blend Modes funcionen correctamente, necesitas tener al menos dos elementos superpuestos: uno con un fondo, como una imagen o un color de fondo, y otro con contenido superpuesto, como texto, contenedores o formas.
<div class="contenedor-fondo">
<!-- Aquí colocarías tu imagen de fondo o un color de fondo -->
<div class="contenedor-superpuesto">
<p class="texto-superpuesto">Este texto se mezclará con el fondo utilizando el modo "Multiply".</p>
</div>
</div>
Es importante mencionar que la propiedad mix-blend-mode afecta únicamente a los elementos secundarios y no al elemento padre.
Ejemplo visual en CodePen
Este ejemplo consiste en dos contenedores. El primero muestra la imagen sin aplicar ningún Blend Mode, mientras que el segundo muestra la misma imagen con un Blend Mode aplicado, en este caso el valor multiply.
Para probar diferentes efectos de Blend Mode, puedes cambiar el valor de la propiedad mix-blend-mode en la regla CSS correspondiente a la clase .blend-mode. Por ejemplo, puedes probar valores como screen, overlay, lighten, darken, entre otros, para ver cómo afectan la apariencia de la imagen superpuesta en relación con el fondo.
Inicialmente, se ha establecido un color de fondo para el contenedor de imagen, que puede modificarse para observar cómo afecta a los diferentes Blend Modes.
4. Compatibilidad de la propiedad CSS mix-blend-mode con los navegadores
Hay que tener en cuenta que la compatibilidad de los Blend Modes puede variar según el navegador. Antes de implementarlos en tu proyecto, 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. Asegúrate de realizar pruebas en varios navegadores para garantizar que los efectos visuales se muestren correctamente.
5. Diferencias entre Blend Modes y Filtros CSS
Los Blend Modes en CSS y los filtros CSS son técnicas diferentes para manipular la apariencia de elementos en una página web. Mientras que los Blend Modes controlan cómo se mezclan los colores de elementos superpuestos, los filtros CSS aplican efectos como desenfoque, saturación y cambios en el color de toda una imagen o elemento. Por tanto:
- Blend Modes: mezcla entre dos elementos superpuestos.
- Filtros: efectos en una imagen o elemento.
Los Blend Modes son más útiles cuando se necesita mezclar dos o más elementos superpuestos, mientras que los filtros son más adecuados para aplicar efectos globales a elementos individuales, como imágenes.
6. Ejemplos prácticos de Blend Modes
Los Blend Modes ofrecen una amplia gama de posibilidades para crear efectos visuales en tu sitio web. Veamos algunos ejemplos prácticos de cómo puedes utilizarlos:
6.1. Efectos de texto creativos con overlay
En este ejemplo se aplica el modo de mezcla «Overlay» a un texto superpuesto sobre imágenes de fondo para conseguir un efecto de superposición llamativo y legible.
CSS:
mix-blend-mode: overlay;
Ejemplo en CodePen:
6.2. Mezclar un color con la imagen de fondo con color-dodge
Este ejemplo crea un contenedor con una imagen de fondo y un div superpuesto con el texto «Color Dodge». El div superpuesto tiene un fondo rojo con una opacidad del 70% y utiliza la propiedad mix-blend-mode con el valor «color-dodge» para mezclar el color rojo con la imagen de fondo, creando un efecto de mezcla de colores.
CSS:
mix-blend-mode: color-dodge;
Ejemplo en CodePen:
6.3. Otros efectos interesantes
- Destacado de elementos interactivos: Utiliza el modo «Screen» en botones o enlaces para resaltarlos sutilmente cuando el usuario pasa el cursor sobre ellos.
- Transiciones de imágenes suaves: Combina imágenes de fondo con Blend Modes como «Multiply» o «Soft Light» para crear transiciones suaves entre diferentes secciones de tu sitio web.
- Creación de sombras y efectos de profundidad: Aplica Blend Modes como «Multiply» a capas de sombra para simular efectos de profundidad y realismo en elementos de diseño.
- Mezcla de colores para fondos gradientes: Experimenta con diferentes modos de mezcla en fondos gradientes para crear efectos de color llamativos.
Te invitamos a probar con diferentes combinaciones de Blend Modes y a modificar los valores de los ejemplos que te hemos proporcionado.