Jump to content


SplitText char and gradient text

Recommended Posts

Hi! I am trying to do a sine wave splitText effect on gradient text! I can't seem to figure out how to have one giant gradient shared between the entire html element wile also having the gradient constrained to the text! Text should end up looking like attached picture!


Thanks for all your help



See the Pen a230106e853bbcf1cde82adae35f46f0 by abstract_code (@abstract_code) on CodePen

Link to comment
Share on other sites

Hi @swaggle welcome to the forum! 


You've disabled the forking of your pen, which makes it harder for anyone to start helping you. 


I know there is some CSS tricks to make text transparent and use a background image on the text, but that seems to only work when it's 'normal' text without extra elements sprinkled in 




See the Pen Exeygvz by mvaneijgen (@mvaneijgen) on CodePen


You can also look in to SVG text with a mask, but there are also cavities with that. 


See the Pen GWpPKP?editors=0100 by daiquiri (@daiquiri) on CodePen


Or give each letter their own distinct gradient based on the position they are in, this will require some more setup, but is the most robust and has the least caveats with browser support. 


Last week I wanted to do something similar, but my gradient was a lot simpler (just two colors), so I used the GSAP util interpolate() with the two colors and based on the position of the letter given each letter a color that was interpolated between the two colors. It is kinda a fake gradient, because each letter has just a solid color, but to me the effect was good enough. Hope it helps and happy tweening! 


See the Pen vYzKXpX by mvaneijgen (@mvaneijgen) on CodePen



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