Additive overlay in webflow

Design help General
21

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
22

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

23

I updated the page with more details blend modes (and all blending modes)

1 Like
24

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

This is fantastic thanks again Vincent,
Jamie

1 Like
25

Next time my mom asks ā€œWhat do you do, again?ā€ Iā€™ll tell her ā€œWriting the encyclopedia of blendsā€.

4 Likes