Jump to content
Search Community

Splittext + Gradient Text, is it possible?

awazigh test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

  • Solution

SplitText adds `div`s to your HTML to work its magic. And your gradient effect bases on background image only works on the element that has text in it directly, so you have to modify your CSS to have the gradient show on the element that will be created when SplitText did its magic.


It looks like your splitting your text twice, once just for lines, but the other time you split it with everything, lines, words and characters, so the last word is split up all in letters which will make it hard to add your gradient back. I've removed your second split and then the last word will be blue 


See the Pen zYNVOEy?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen


If you must have that second SplitText I've also have a modified css version which add the gradient css to all elements within `.span-gradient * {` (line 14)


See the Pen jOyjNaY?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 1
  • Thanks 1
Link to comment
Share on other sites


If you change the color on the gradient a bit in @mvaneijgen's second example you will notice the gradient still being applied to every single character.


What you would want to do to display it properly is add type: "lines" to the parentSplit too and change .span-gradient * { } to .span-gradient { }



See the Pen bc6f73767c077867d88585c8caf176f7 by akapowl (@akapowl) on CodePen

  • Like 3
Link to comment
Share on other sites

  • 1 year later...


Hello @agsymonds


2 hours ago, agsymonds said:

I was unable to fork the Codepen


I set to my example above to public, so you should be able to fork it now and tinker with it.


In general, I really think that is more of a CSS styling question, than it has to do with GSAP. As you can see in this example below, GSAP does its job of splitting into chars just fine, when you remove the -webkit-text-fill-color: transparent; on the .span-gradient.


See the Pen XWPwaXK by akapowl (@akapowl) on CodePen




Albeit doing some quick searches, I'm not sure, if there is an easy way to apply a continuous gradient to multiple individual elements, which you would need in a scenario where you were to split by chars.


So I went ahead and fiddled together a quick and dirty forEach loop that sets the backgroundSize of each character in the .span-gradient to the width of the whole span element, and offsets each character's backgroundPosition depending on the width of the characters that come before it. For that, in CSS, the gradient is now applied to each element inside the span, instead of the span itself.


This should give you an idea for how to possibly approach it, if nobody else knows of an easier way to get that result - I'd be curious myself if there is.


I hope that will be somewhat helpful though. Happy tweening!


See the Pen jOvombV by akapowl (@akapowl) on CodePen


  • Like 3
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.
  • Create New...