Streaming live at 10am (PST)

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:

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:

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