animated rainbow/gradient text tutorial
Category: Resources
Current mood:  creative

Hi hi!!! I have another tutorial! :D 
For this tutorial I'm gonna assume you have at least a rough understanding of css animations and gradients. If you don't, w3schools has a really good tutorial on both!! If you have any other questions feel free to ask ^o^ (Take caution with the comments on this blog, though... I'm having some technical difficulties with my customization and for some reason some text options in the comment section don't work and require you to refresh the page)

The screenshots I'm using to demonstrate the steps are from this jsfiddle! Feel free to mess around with it yourself! Getting the timing right can be a bit of a process, so I do recommend using something like jsfiddle or codepen.

!!!SEIZURE WARNING BTW!!!

HEY HEY!!
HI HI HI!!! :D
HELLO!!!!
^^hover over those lines for a cool effect!

For the tutorial I'll use the rainbow one as an example, but I will go more into detail on the others later.

Let's write the keyframes!:
The first step in writing out your keyframes should look a little like this:

Here I have my starting point and my ending point, 0% and 100%. To figure out what percent your keyframes should go up by, you have to take the number of color stops you want and subtract one to get a fraction. Then turn the fraction into a percentage using a calculator, or your brain if you can do that. Because I want 8 colors in this gradient, my keyframes will go up by 1/7, which is about 14-15%. 


Now's the fun part, write out your first gradient!

For all the other keyframes, write out the same gradient except, the first color stop of the previous keyframe should be moved to the back.

Think of it like a conveyor belt, if that helps
Once you're done, the first color stops of each line should look like a vertical version of your initial gradient:

(You might notice in the screenshots I put a space between linear-gradient and the parenthesis. Don't do that. I put it there to make the writing clearer, but it does break everything.)

To actually make the animation play, just add your preferred animation settings onto whatever you want this effect for.

If you play the animation in this state, you can see that it's just given the text a rainbow background, while the text itself is unchanged. To fix this, add some background-clip.

(I'm pretty sure webkit is necessary, but correct me if I'm wrong)
Now the text has a cool rainbow halo around it. I'm sure this is useful for something, but to achieve the advertised look, make the text color transparent.


If you notice the animation is choppy and it's bothering you, you have a couple of options:

  1. Lower the animation duration and speed it up
  2. Add transition colors between your existing color stops until it's smooth enough. It means you have to redo all the keyframes, but it's necessary for gradients with only 2-3 colors. You can see me do this with the pink animation, or .cool in the fiddle. The named colors (red, deeppink, hotpink) are my main colors, the hex codes are the transition colors between them.

Something else ~advanced~ I did in .cool is, there's only 5 colors showing in each gradient despite there being 8 total color stops. I did this just by writing out everything like I showed in the tutorial, but then deleting the last three colors in each gradient.