Blending mode showing different colors?

Hey folks, so I’m not familiar with blending modes and I’m trying to achieve this final effect via using ‘difference’ blend mode.

But for some reason, instead of getting the white color, I’m gettting some light green color on blending. I’ve no idea why this is happening and watched a couple of tutorials for the same but still clueless.

Here’s a read-only link to the site - https://preview.webflow.com/preview/andus?utm_medium=preview_link&utm_source=designer&utm_content=andus&preview=a89b74ad28f4a340e8d5ef115af6ffb5&workflow=preview

You’re seeing the green because the div with the white background is set to difference and it’s over top of the maroon color.

If you want the logo to invert over the colors of the background, you’ll need to remove the difference blend mode from the lower white div and instead apply it to the loader-logo_container element with a z-index of 1 or more. This is what it should look like:

1 Like

Hey Mikey, tried implementing this. What happens is then the text at the bottom left and right isn’t visible anymore on the white background.

Make sure the loader-bottom_wrapper has the difference blending mode and remove all blending modes from the child elements. With blend modes, all you need is the parent container to have the style and all children will inherit the effect.

Oh got it! It’s working fine now, thank you! Is there any way I could replace the mint green color that’s coming up on the logo and the text with white color? Or is it technically not possible?

The difference for that dark maroon color is that subtle green so just make sure the white div is not sitting on top of it.

A quick solution is removing the background color of the loader wrapper and add adding a new div — similar to the white div — with the maroon color that only takes up the top half of the page: