Blending modes

Blending only affects the parent element. These switches above change the underlying div, wich isn’t a direct parent of the round color elements. They don’t blend with the div’s background color, they only blend with each other.

Here the background of the immediate circles’ parent have been turned to white. The blending properties affect the white color.

Here is the code you can copy in your sites’ dashboard Custom Code section (the Head section).

<style>
/* Blending modes */
.mbm-normal{mix-blend-mode: normal;}
.mbm-multiply{mix-blend-mode: multiply;}
.mbm-screen{mix-blend-mode: screen;}
.mbm-overlay{mix-blend-mode: overlay;}
.mbm-darken{mix-blend-mode: darken;}
.mbm-lighten{mix-blend-mode: lighten;}
.mbm-color-dodge{mix-blend-mode: color-dodge}
.mbm-color-burn{mix-blend-mode: color-burn;}
.mbm-hard-light{mix-blend-mode: hard-light;}
.mbm-soft-light{mix-blend-mode: soft-light;}
.mbm-difference{mix-blend-mode: difference;}
.mbm-exclusion{mix-blend-mode: exclusion;}
.mbm-hue{mix-blend-mode: hue;}
.mbm-saturation{mix-blend-mode: saturation;}
.mbm-color{mix-blend-mode: color;}
.mbm-luminosity{mix-blend-mode: luminosity;}
</style>

Once done, you can add these classes to your elements in the Style (S) panel. Note: blending doesn’t occur in Webflow Designer, only on the published site.