Jump to content


Color fill only the visible part of transparent PNG

Recommended Posts

Is there a way to only color fill the visible parts of a transparent png? I feel like this is something I've either done with GSAP or back in the day with AS3, could be mistaken though, it's been awhile. Thanks for any help!

Link to comment
Share on other sites

Hi Jonah :)


Welcome to the forums.


Blake has a pretty cool pen that I think may help you:


See the Pen eJdvMX by osublake (@osublake) on CodePen


My other thought would be - do you have the option of using SVG instead of png? If so, a world of possibilities would open up for you.


Happy tweening


  • Like 1
Link to comment
Share on other sites

Hi Craig, thanks for the reply! I actually stumbled upon using SVGs and found one of GS codepen: 


See the Pen gpDrC by GreenSock (@GreenSock) on CodePen


The only thing is that SVG is in the mark-up. Is that a requirement or can you also use an external SVG asset? 

Link to comment
Share on other sites

Just a random idea (if you need to use PNG): what if you just put the <img> into a <div> that has a background-color? And obviously size the <div> to exactly the size of your image. That way, the transparent areas would just show through to the background-color. 

  • Like 3
Link to comment
Share on other sites

Thanks guys, I ended up using the inject and append method that Craig linked to from another thread. As always, great response and support from Team Greensock. Much appreciated! 

  • Like 2
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.