Gradient Text-Shadow

[swampthang]

This is more of an offering for anyone interested in playing with it. In my app, I'm allowing users to pick a font-color and 2 shadow colors to form a shadow gradient. Using hsla color is the easiest way for me to parse through colors and alpha settings so used that. What I ran into doing a simple diff calculation of the color hue numbers was often an ugly rainbow gradient. For example, if you want to start with a hue of 350 and blend to a hue of 10 ( which are both in the red family), the closest path is 350 -> 0 -> 10. So, you can't just subtract 10 from 350. The codepen has some conditional code that finds the closest path. 

 

If this helps someone, that's great. Just wanted to share. I know it could be greatly refactored though, so, if anyone wanted to fork and refactor, or offer a better solution, please do!

See the Pen qQWvVz?editors=0010 by swampthang (@swampthang) on CodePen

[swampthang]

One thing I'm trying to figure out that has me bumfuzzled - if you set the speed to something really slow, like 10, click to run the animation and quickly pause it, the initial shadow is coming in gray. Should this be a fromTo? Braincramp.

[swampthang]

Ok, figured it out. It did need to be a fromTo. Here's a fork from the original:

 

See the Pen MzwyJg?editors=1010 by swampthang (@swampthang) on CodePen