How to use mix-blend-mode

Hey there, I saw this incredible background colour change interaction on the following site and was curious if anyone knew how I could recreate it (don’t mind using custom code embeds as well…)

Video of interaction: WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free

Thank you!

Here is my public share link: LINK
(how to access public share link)

hi @seneca005 When you open this website in Dev Tools you will see how they have it done. It is mix of columns width interaction mixed with blend-mode.

1 Like

Didn’t pixelgeek do a YouTube video of this a few months back?
Does look nice though, shutter blind effect.

1 Like

Hey there Idatus,

I searched on YouTube but couldn’t find anything. Mind sending me a link to the tutorial? Thank you! I appreciate your help!

I looked on pixel and searched but couldn’t find it.
I did inspect the site as Stan did and looked up blend-mode
I found this link on the forum

Additive overlay in webflow

Vincent adds this

.multiply {mix-blend-mode: multiply}

add a class to the div etc of multiply and the .multiply means apply this to anything with the class name of multiply.

Then its a bunch of vertical divs that change as the pages scrolls.

Hope that helps a little bit. At least I learned some more code!

1 Like

Hi @seneca005 here is a simple example how to if you still struggle to recreate this effect. Keep in mind that is just simple example (I have created in a few minutes) and I didn’t pay attention to create exactly identical effect but is close. And of course there is more ways how to achieve this effect.

Read Only

1 Like

Hi @seneca005 do you need more clarifications how to ?

1 Like

Hey Stan, I’ve not yet tried to use it but I will soon. I want you to know that I appreciate your help a lot and checking up on me to see if it has worked. I will update you soon hopefully.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.