Jump to content
GreenSock

MexicoNewZealand

How to use different background colors in mixed blend mode multiply to achieve knockout text effect successfully

Recommended Posts

Hi! 

 

I have a quick question for a small project I am building and that has some GSAP animations. The knockout text effect created in the code pen above uses mixed blend mode: multiply to achieve the desired knockout effect. For this to work, the parent div (.text) needs to have a background color of black and the actual text needs to have a color of white to create the knockout effect. I am looking to implement a yellow background color but mixed blend mode multiply requires black and white to work; are there any solution to achieve my goal of having a yellow background color? All help will be greatly appreciated!

See the Pen eYMjLxP by justjoinednow (@justjoinednow) on CodePen

  • Like 1
Link to comment
Share on other sites

It sounds like you need masking or clipping, not a mix-blend-mode. 

Link to comment
Share on other sites

12 hours ago, GreenSock said:

It sounds like you need masking or clipping, not a mix-blend-mode. 

out of curiosity how would i go about achieving this?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×