If you’ve ever used photo editing software, blending modes in Webflow will feel like second nature. When elements, similar to layers, stack on top of each other, blending lets you achieve different kinds of visual effects based on the mode you select. You can live preview each blending mode on the selected element in the Webflow Designer — and you can do all of this without using any custom code.
In this lesson you’ll learn:
What a blending mode is
Blending modes in Webflow offer a variety of different ways for an element to blend with (or overlap) other elements below it — all without the necessity of custom code. Webflow takes care of the mix-blend mode CSS property for you, and allows you to set how an element’s content should blend with the content of the element’s parent and the element’s background. Blending modes allow you to unlock a ton of creative possibilities to go beyond element opacity adjustments.
You can think of it in these terms: your top element with the blending mode set on it (your foreground) overlaps and interacts with its parent element and the bottom elements (your background elements) and produces a new, final color (the combination of the colors from the top and bottom elements).
How each blending mode behaves
There are 16 blending modes in Webflow’s Effects section of the Style panel. Modes that behave similarly are placed next to each other in the blending mode dropdown. These mode groupings consist of:
- Default mode (Normal)
- Darken modes (Darken, Multiply, and Color burn)
- Lighten modes (Lighten, Screen, and Color dodge)
- Contrast modes (Overlay, Soft light, and Hard light)
- Comparative modes (Difference and Exclusion)
- Composite modes (Hue, Saturation, Color, and Luminosity)
Let’s cover what each blending mode does when you apply it to your top element.
Default mode
Normal
The Normal blending mode is the default blending mode for elements on the Webflow canvas. The final color is the top element’s color, regardless of what the bottom element’s color is. The effect is like 2 opaque pieces of paper overlapping.
Darken modes
As the name implies, the blending modes in the Darken grouping will turn the final colors darker. Anything that is white in the top element will become invisible, and anything that is darker than white is going to have some darkening effect on the bottom elements.
Darken
Darken mode results in a final color composed of the darkest values of the top and bottom elements. If the top and bottom elements are the same color, there is no change.
Multiply
Multiply mode multiplies the colors of the top and bottom elements. A black color leads to a black final color, and a white color leads to no change. The effect is like two images printed on transparent film overlapping.
Multiply can produce many different levels of darkening depending on the luminosity values of the top element’s colors, which makes it handy for darkening elements or creating shadows.
Color burn
Color burn mode gives you a darker result than Multiply mode by increasing the contrast between the top and the bottom element colors, which results in more highly saturated mid-tones and reduced highlights. White colors in the top element produce no change.
Lighten modes
Modes that fall under the Lighten grouping turn final colors brighter. Anything that is black in the top element will become invisible, and anything that is brighter than black is going to have some darkening effect on bottom elements.
Lighten
Lighten mode results in a final color composed of the lightest values of the top and bottom elements. If the top and bottom elements are the same color, there is no change.
Screen
Screen mode always results in a color that is brighter. Black produces no change, while the brighter colors remain. The effect is like shining 2 overlapping images onto a projection screen.
Screen mode can produce many different levels of brightening depending on the luminosity values of the top element, which makes it handy for brightening elements or creating highlights.
Color dodge
Color dodge mode gives you a brighter effect than Screen mode by decreasing the contrast between the top and bottom elements’ colors, which results in saturated mid-tones and blown highlights. Black colors produce no change.
Contrast modes
Contrast modes are a mixture between the modes in the Darken and Lighten groupings. They create contrast by both lightening and darkening the final colors by using complementary blending modes to create the final result.
Colors darker than 50% gray will have a darkening effect applied. Colors brighter than 50% gray will have a brightening effect applied.
Overlay
Overlay mode is a combination of the Multiply and Screen modes, with the bottom element always being dominant. Overlay mode uses Screen mode at half strength on colors lighter than 50% gray, and uses Multiply mode at half strength on colors darker than 50% gray. 50% gray itself becomes transparent.
Another way to think of how Overlay mode behaves is to consider how it shifts mid tones. Darker top element colors shift mid tones to darker colors, while lighter top element colors shift mid tones to brighter colors.
Soft light
Soft Light mode acts a lot like Overlay mode. It applies either a darkening or lightening effect depending on the luminance values, but in a much more subtle way. You can think of Soft light mode as a softer version of Overlay mode, without the harsh contrast. The effect is similar to shining a diffused spotlight on a backdrop.
Hard light
Hard light mode combines Multiply and Screen modes using the brightness values of the top element colors to make its calculations. The results with Hard light mode can be intense. The effect is similar to shining a harsh spotlight on a backdrop. You might find it helpful to reduce your element’s opacity to get the best results with this blend mode.
Comparative modes
Blending modes in the Comparative grouping look for variations between the top and bottom element colors to create the result.
Difference
Difference mode subtracts the darker of the elements’ colors from the lighter one. White inverts the colors of the bottom element, black produces no change, and dark grays apply a slight darkening effect.
Exclusion
Exclusion mode creates an effect similar to but lower in contrast than Difference mode. White inverts the colors of the bottom element, black produces no change, and dark grays apply a slight darkening effect.
Composite modes
Modes in the Composite grouping use different combinations of the primary color components (hue, saturation, and brightness) to create the final result.
Hue
Hue mode produces a final color that has the hue of the top element’s color, while using the saturation and luminosity of the bottom element’s color. You can use Hue mode to change hues in your top element while maintaining the tones and saturation of the bottom element.
Saturation
Saturation mode produces a final color that has the saturation of the top element’s color, while using the hue and luminosity of the bottom element’s color. Pure gray colors, having no saturation, will have no effect.
Color
Color mode results in a final color that has the hue and saturation of the top element’s color, while using the luminosity of the bottom element’s color. This preserves the gray levels and is useful for colorizing monochrome top elements.
Luminosity
Luminosity mode’s final color has the luminosity of the top element’s color, while using the hue and saturation of the bottom element’s color.This mode creates the inverse effect of Color mode.
How to apply a blending mode to an element
By default, the blending mode for elements is set to Normal.
To preview and add a blending mode to an element on the canvas:
- Select your element
- Open the Style panel > Effects > Blending
- Click the Blending dropdown menu
- Hover over any of the blending modes to live preview them on your element
- Select your blending mode to apply it to your element
Additional resources: Learn more about the Style panel.