Blending mode

Dynamically control how your stacked elements’ colors blend together with blending modes.

This video features an old UI. Updated version coming soon!
An example of the Multiply blending mode is shown on foreground elements in a website design.

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:

  1. What a blending mode is
  2. How each blending mode behaves
  3. How to apply a blending mode to an element

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). 

In these examples, the top element — your foreground — contains blue colored text elements (pictured in the left box). The bottom elements — your middleground and background — contain yellow and magenta text elements (pictured in the right box). 

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:

A grid of 16 blending mode options shows the different behavior of each.

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.

A normal blending mode is applied to a top element. 

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.

A darken blending mode is applied to a top element. 

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. 

A multiply blending mode is applied to a top element. 

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. 

A color burn blending mode is applied to a top element. 

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.

A lighten blending mode is applied to a top element. 

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. 

A screen blending mode is applied to a top element. 

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. 

A color dodge blending mode is applied to a top element. 

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.

An overlay blending mode is applied to a top element. 

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.

A soft light blending mode is applied to a top element. 

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. 

A hard light blending mode is applied to an element. 

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.

A difference blending mode is applied to a top element. 

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.

An exclusion blending mode is applied to a top element. 

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.

A hue blending mode is applied to a top 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.

A saturation blending mode is applied to a top element. 

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.

A color blending mode is applied to a top element. 

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.

A luminosity blending mode is applied to a top element. 

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:

  1. Select your element
  2. Open the Style panel > Effects > Blending
  3. Click the Blending dropdown menu
  4. Hover over any of the blending modes to live preview them on your element
  5. Select your blending mode to apply it to your element
The Style panel shows the Blending effects area highlighted. 
The menu of all the Blending modes is shown with Multiply selected.

Additional resources: Learn more about the Style panel.

Try Webflow — it's free
No items found.
This video features an old UI. Updated version coming soon!