Añade cualquier modo de fusión CSS a un elemento de Webflow con una combo class, incluido isolate, y una guía clara de lo que hace cada modo de fusión.
Actualización, octubre de 2026: Webflow ya incluye modos de fusión de forma nativa (panel Style > Effects > Blending) y se previsualizan en vivo en el Designer, así que para un solo elemento ya no necesitas código personalizado. El método de la combo class que verás abajo sigue funcionando y sigue siendo una forma de conseguir isolate, que no es uno de los 16 modos de fusión del panel Style.
Este es un how-to muy sencillo y esperamos que lo uses en Webflow, porque los modos de fusión de CSS pueden aportar mucha flexibilidad y elementos muy atractivos a tus diseños, y cuando lo escribimos Webflow no los admitía de forma nativa sin código personalizado. Como pequeño estudio de Webflow centrado sobre todo en el diseño en Webflow, en Milk Moon Studio siempre buscamos la forma más simple de hacer las cosas, así que esta solución de copiar y pegar puede ser de gran ayuda. No es nada nuevo para los expertos en Webflow, pero funciona muy bien con las combo classes e incluso te permite excluir elementos de tu diseño de la mezcla.
Implementarlo será facilísimo: solo vas a pegar un fragmento de código personalizado en la sección <head> de los ajustes de tu proyecto y después añadirás una combo class a cualquier elemento al que quieras aplicar un modo de fusión concreto.
Lo primero: ¿qué son los modos de fusión? Si alguna vez has trasteado con Photoshop, seguramente los has usado. Durante mucho tiempo se usaron sobre todo en la edición de imágenes, y CSS los admite desde hace tiempo, pero hasta hace poco muchas herramientas, Webflow incluido, no los soportaban de forma nativa.
Los modos de fusión determinan cómo se mezclan dos capas entre sí. Hay una capa base y una capa de mezcla, y al combinarse producen un resultado concreto. La clave es que debe haber más de una capa para que la fusión funcione. La capa superior se mezcla con la capa inferior y el resultado depende del modo de fusión elegido. En Webflow podrías decir que una imagen dentro de un div con color de fondo se mezcla con ese color, o 'capa', de modo que la imagen es solo una capa sobre el div, que en este ejemplo es la capa inferior.
En Webflow las 'capas' también se pueden apilar. Imagina que tienes una Section con una imagen de fondo, encima un Container y dentro unos divs. Si tienes una imagen en uno de los divs 'de arriba' y le aplicas, por ejemplo, el modo de fusión Darken, según nuestra experiencia muchas veces no se mezclará con la imagen de la sección inferior, porque las capas intermedias pueden formar su propio contexto de apilamiento. La imagen se mezcla hacia abajo, pero a menudo solo hasta el div que tiene debajo. ¿Cómo lo resolvemos? Fácil: aplicamos el modo de fusión a toda la 'pila' que está sobre el div con el que quieres que se mezcle. Ahora todo se mezcla hacia abajo. Pero ojo, no todo debía mezclarse. Puede haber texto u otras imágenes en esa 'pila' que no deben mezclarse. No hay problema: aplícales isolate y no se mezclarán con lo que tienen detrás. No te preocupes, todo esto forma parte del tutorial y, igual que con el modo de fusión que elijas, podrás aplicar isolate a cualquier cosa simplemente añadiendo una combo class.
Al final de este post añadiremos también una lista de todos los modos de fusión disponibles y de lo que hace cada uno.
Así que manos a la obra.
Paso 1: Añade los estilos CSS
- Ve a los Project Settings de tu proyecto de Webflow.
- Abre Custom Code, pega el código de abajo en la sección Head y guarda:
<iframe height="300" style="width: 100%;" scrolling="no" title="CSS Blend Modes In Webflow with Combo Classes" src="https://codepen.io/milkmoonstudio/embed/dyjwRZv?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/dyjwRZv">
CSS Blend Modes In Webflow with Combo Classes</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
Si ya tienes una etiqueta style ahí, añade el código dentro de esa etiqueta y recuerda tener a mano esta lista de modos de fusión para saber cuál es cuál cuando añadas las combo classes.
El código ya está disponible en cualquier página de tu sitio, porque lo has aplicado en el código <head> de los ajustes del proyecto. Si quisieras, podrías limitarlo a una sola página añadiéndolo a la sección <head> de los ajustes de esa página en el Designer, pero si vas a usar modos de fusión en varias páginas, añádelo a los ajustes del proyecto y te facilitarás la vida.
Una nota al margen: no podrás ver el efecto de fusión real en el Designer, porque es código personalizado. Si quieres ver lo que ocurre, tienes que publicar y mirar el sitio en vivo.
Paso 2: Aplica la combo class
Ya está casi todo listo, así que usemos un modo de fusión. Para este ejemplo, imaginemos que tienes un div con un color de fondo definido y, dentro de ese div, una imagen a la que quieres aplicar el modo de fusión Multiply. Esto es lo que tienes que hacer:
- Ponle a la imagen un nombre de 'selector' como harías normalmente y dale estilo como siempre. Nuestra imagen ocupa todo el ancho y tiene posicionamiento absoluto para colocarla justo donde queremos. Ahora toca aplicar el modo de fusión.
- Añade una combo class para Multiply. Siguiendo los estilos que pegaste como referencia, la combo class debería ser: mbm-multiply
Y ya está: tu imagen se mezclará con el modo Multiply al publicar, así que publica y previsualiza la URL de la página.
Veamos cómo queda nuestro ejemplo en el Designer y en el sitio en vivo:
Nota: aquí no verás la mezcla por culpa del código personalizado. Tienes que publicar y abrir el enlace.
En este sitio en vivo vemos que todos los modos de fusión funcionan estupendamente.
Fíjate en que en el ejemplo anterior hemos apilado algunas 'capas'. Abajo del todo tenemos un color sepia como fondo de la sección, luego un mapa con el modo Darken aplicado y, encima, la imagen de la calle a la que aplicamos Multiply, de modo que ahora vemos el mapa 'a través' de la imagen de la calle.
Esta es una lista práctica de las combo classes que debes usar para cada modo de fusión:
- mbm-normal
- mbm-multiply
- mbm-screen
- mbm-overlay
- mbm-darken
- mbm-lighten
- mbm-color-dodge
- mbm-color-burn
- mbm-hard-light
- mbm-soft-light
- mbm-difference
- mbm-exclusion
- mbm-hue
- mbm-saturation
- mbm-color
- mbm-luminosity
- mbm-isolate
Verás que la última es isolate, de la que hablamos al principio del post. Para recapitular: imagina que tienes tres 'capas' o divs que deben mezclarse hacia abajo. El div inferior tiene un color de fondo y quieres que una imagen, o lo que sea, dentro de un div dentro de otro div por encima de ese, se mezcle con él. Ahora bajamos por la madriguera del conejo: un div dentro de un div dentro de un div con una imagen. La imagen se mezcla hacia abajo cuando aplicas el modo de fusión, pero según nuestra experiencia a menudo solo una capa, hasta el div en el que está, así que tienes que aplicar el modo de fusión también a ese div, y así sucesivamente hasta aplicarlo al div que está por encima de la capa con la que quieres mezclar (en este caso, el div con el color de fondo). Es bastante fácil: sigues aplicando la misma combo class del modo de fusión hacia abajo hasta llegar. Luego, para evitar problemas, si hay elementos que no quieres que se mezclen, aplica la combo class mbm-isolate a ese elemento o imagen o lo que sea, para que no se mezcle con lo que tiene detrás. (Isolate en un padre mantiene la mezcla de sus hijos dentro de ese padre.)
Y eso es todo: ya eres un experto en modos de fusión.
Modos de fusión
Y como prometimos, aquí tienes la lista de modos de fusión, sus grupos y lo que hace cada uno:
Darken
Los modos de este grupo oscurecen los colores finales. Este grupo contiene tres valores:
Darken:
Mezcla los píxeles según los valores de luminancia de cada color. El resultado es el color base o el color de mezcla, según cuál sea más oscuro.
Multiply:
Mezcla la luminosidad del color base con el color de mezcla. El resultado siempre es un color más oscuro, o no cambia nada si el color de mezcla es blanco.
Color burn:
Da colores más oscuros que Multiply porque aumenta el contraste entre la capa base y la capa de mezcla.
Lighten
Los modos de este grupo aclaran los colores finales. Este grupo contiene tres valores.
Lighten:
Toma el color más claro entre la capa base y la capa de mezcla.
Screen:
Mezcla los colores más claros de ambas capas, pero este tiene un rango de mezcla mayor que Lighten, según la luminosidad de la imagen.
Color dodge:
Funciona como Lighten, pero da un efecto más brillante que Screen porque reduce el contraste entre la capa base y la capa de mezcla.
Contrast (complejo):
Este grupo tiene tres valores y mezcla en función del contraste de la capa de mezcla.
Overlay:
Mezcla los píxeles usando los tonos medios. Combina Multiply y Screen a media intensidad, y la capa inferior sigue dominando. Los colores más oscuros de la capa superior empujan los tonos medios hacia lo oscuro, los más claros los empujan hacia lo brillante, y el gris al 50% se vuelve transparente.
Soft light:
Una versión más suave de Overlay, sin el contraste duro, que aplica un efecto de oscurecimiento o de aclarado según los valores de luminancia.
Hard light:
Una versión de Overlay que mezcla las capas según el brillo de la capa superior.
Los colores más oscuros que el gris al 50% oscurecen el resultado y los más claros que el gris al 50% lo aclaran. Overlay y Soft light son los más suaves; Hard light puede ser intenso, así que bajar la opacidad del elemento suele ayudar.
Inversion
Los modos de este grupo (Webflow los llama Comparative) buscan las diferencias entre las dos capas. Con un color de mezcla blanco, la capa base se invierte, lo que simplemente significa que los colores saltan a sus opuestos: el rojo se vuelve cian, el verde magenta y el azul amarillo.
Difference:
Produce un resultado al calcular la diferencia entre los píxeles de la capa de mezcla y los de la capa base.
Exclusion:
Mezcla los valores de color blanco invirtiendo los colores de la capa base.
Los modos de este grupo invierten los colores según sus valores de brillo. Así, el negro casi no se ve afectado y el blanco invierte los colores al 100%.
Composite
Estos modos mezclan las capas tal como indican sus nombres:
Hue:
Toma el tono de la capa de mezcla y conserva la saturación y la luminosidad de la capa base.
Saturation:
Conserva la luminosidad y el tono de la capa base y mezcla los colores según el valor de intensidad del color.
Color:
Conserva la luminosidad de la capa base. Simplemente superpone el color sobre la capa base, eliminando los colores de la capa base.
Luminosity:
Luminosity conserva el tono y la saturación de las capas base, pero mezcla la luminosidad de la capa de mezcla.
Este grupo trabaja con el modelo HSL, así que los negros, los blancos y los grises no tienen un efecto mayor en la mezcla.
Preguntas frecuentes sobre los modos de fusión
¿Cómo uso mix-blend-mode en Webflow?
Lo más rápido hoy es el panel Style: selecciona tu elemento, abre Effects > Blending y elige un modo. Si necesitas aplicar un modo a toda una pila de elementos con la misma clase, o quieres isolate, todavía puedes pegar nuestro CSS en los ajustes del proyecto y añadir una combo class como mbm-multiply, como se explica arriba.
¿Qué hace el modo de fusión multiply?
Multiply multiplica los colores de las capas superior e inferior. El negro sigue siendo negro, el blanco deja la capa inferior sin cambios y todo lo que hay en medio se oscurece, lo que lo hace ideal para oscurecer elementos o crear sombras.
¿Cuáles son los modos de fusión de CSS?
En Webflow puedes elegir 16: normal, darken, multiply, color burn, lighten, screen, color dodge, overlay, soft light, hard light, difference, exclusion, hue, saturation, luminosity y el modo llamado Color. La lista de arriba explica cada uno, y mbm-isolate es nuestra clase extra para los elementos que deben ignorar la mezcla.
Un agradecimiento especial a Jignesh Patel por las definiciones originales (su post en imjignesh.com/blending-modes-in-css ya no está en línea). Para ver ejemplos visuales, visita la página de MDN sobre mix-blend-mode.
Si te gustan este tipo de trucos de CSS para Webflow, echa un vistazo a cómo creamos un resumen de blog con combo classes, cómo construimos degradados de fondo controlados por el CMS o nuestra guía visual de las funciones de easing.
Para más how-tos relacionados con Webflow y temas como analítica, etc., consulta la sección de how-to de nuestro blog.
