Applying blend-mode to img

Community resources Product feedback
1

I want to add a blend-mode to my png (exclusion). Whats the best way to do it?
Can I edit the code in webflow?

Thank you

1 Like
2

Hello @AnandaSanti,

To add blend modes to images you need to add a little bit of CSS code. You can do it in the project settings > custom code.

<style>

    /* Blending modes */

    .your-img-class {
      mix-blend-mode: exclusion;
    }

</style>

Here’s a screen record where you can see how I’m adding the blend mode to an image > https://www.useloom.com/share/aa4c5a0852154babac5c806325d3257e

Hope this helps

Piter :webflow_heart:

1 Like
3

Thank you very much Piter!!

1 Like
4

Hello Peter, I tried your solution, but still can’t reach the result I need.
Let me share with you the project:
https://preview.webflow.com/preview/off-season-test?utm_medium=preview_link&utm_source=designer&utm_content=off-season-test&preview=6d811bcb1091ed48c47d7ebe56f8de64&pageId=64a58b025c13e969a56747c1&workflow=preview

I need the logo and email icon to invert related to the background, and I added this CSS code in the project settings:

<style>

    /* Blending modes */

    .off-season-logo {
      mix-blend-mode: difference;
    }
  	.email-icon {
      mix-blend-mode: difference;
    }
  

</style>

Let me know if you can help me too in this.
Thank you
Fabio