Mix-blend-mode: difference custom code not responding


I’m currently doing some work on a portfolio website. There’s a certain effect I’m trying to recreate where the text inverts its colour depending on the background. I’ve seen it work using “mix-blend-mode: difference” in custom html code.

I’ve gotten it to function in safari, however chrome doesn’t seem to respond to the code on my site. I don’t think it’s a compatibility issue since this one does work: https://martijns-dynamite-project-1a4a24.webflow.io

Can’t find what I’m doing wrong, maybe a more seasoned developer can help me find a workaround?

Thanks in advance

Here is my site Read-Only: https://preview.webflow.com/preview/iml-e6128b?utm_medium=preview_link&utm_source=designer&utm_content=iml-e6128b&preview=4229b814fdaa994c7a182f7122259003&mode=preview

It looks like your embed element is targeting a hidden element (.logo instead of .logoblock) but you’ll also need to add a background color to your animation div block. I’m guessing this a requirement of the mix-blend-mode property—something I stumbled upon while testing your code on the live site.

Once I made those two adjustments, I see the reversed text that responds to the animated image as expected:


Just for reference, here’s the code I used in your embed element:

  .logoblock, .tabs {
    mix-blend-mode: difference;
1 Like

Hi Mikeyevin

Works like a charm, thank you so much for your help and time!

Thanks again

Hi, @mikeyevin!

I’m trying to achieve the same effect with the navbar on my website, but it doesn’t work. I have background color on the section element and on the body element too — it feels like mix-blend-mode wasn’t applied to my navbar for some reason.

Could I DM you my read-only link?

Of course, send it on over :+1:

Hi Mikey -

Trying to achieve the same effect on my site. After several hours of playing with code, I haven’t had any luck. Would you perhaps be able to take a look?

Many thanks