Streaming live at 10am (PST)

Additive overlay in webflow

The code used:

<style>
/* Blend 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>
1 Like

Fantastic! Thank you so much these will be a great help, so much clearer than the instructions I always end up on from CSS Tricks.

Thanks again Vincent,
Jamie

I updated the page with more details http://sab.webflow.com/blend-modes (and all blending modes)

1 Like

Wow! Thank you so much! Bloody hell that’s like an encyclopedia of blends haha.

This is fantastic thanks again Vincent,
Jamie

1 Like

Next time my mom asks “What do you do, again?” I’ll tell her “Writing the encyclopedia of blends”.

4 Likes