Animated Gradient Text Color 🌈

We can make text more colorful using CSS gradients as background images, applied to text using blend modes, without using actual color fonts.

In this tutorial, we will use rainbow colors to rebuild the effect step by step, with code snippets and demos that you can use to experiment on code pen.

I have used the same technique, based on a very old tutorial on CSS-tricks.com, for my portfolio relaunch in a more subtle way, but let's proceed with contrasting rainbow colors to add a vintage retro touch to our demo!

CSS gradients as background images

Color gradients are a gradual blending from one color to another, or a series of blending using multiple colors like the colors of the rainbow. Gradients are treated as images in CSS.

Talking about a Rainbow

We can't write: color: rainbow in CSS, but can still use words to describe certain values in CSS. While numbers allow for very precise values, words are easy to read and easy to keep in mind, so they are ideal for teaching, testing, and demonstration.

We can also specify the gradient direction in natural language by adding (for example) "to right" as a first value:

.gradient-container {
  background: linear-gradient(
    to right,
    red, orange, yellow, green, blue, indigo, violet
  );
}

Depending on your editor (and extension, you can even see the rainbox colors in the syntax highlighting of your code.

But an actual rainbow is a bow, not a bar, so let's change the linear gradient to a radial one.

A radial gradient...

Gradients can have different shapes and directions, which are more generally called types of gradients. We can't define free-form polygons, but we can combine basic gradient types in CSS, see the overview: using CSS gradients at Mozilla Developer Network.

Changing "linear" to "radial" and setting equal width and height displays a colorful box. But that's far from looking like a rainbow yet!

... turns into a rainbow gradient

Let's add white at each end of the gradient, and set the position. Like we used "to right", we can say "at 0% 100%" to put the center bottom left.
Let's also add color-stops to enlarge the white areas:

.gradient-container {
  background: radial-gradient(
    at 0% 100%, /* position center to bottom left */
    to right,
    white 20%, /* color-stop to enlarge white center */
    red, orange, yellow, green, blue, indigo, violet,
    white 50%  /* color-stop to enlarge white outside */
  );
}

Rainbow Letters

But what if we want to apply rainbow colors to a text?

.rainbowtext {
  color: rainbow; /* (invalid) */

Text can have color, but gradients are images (not colors) in CSS, so we can only use them as background-images. But like this 2010 CSS tricks tutorial shows, a combination of webkit-background-clip and webkit-text-fill-color makes browsers (including Chrome) apply the background to the text:

-webkit-text-fill-color: transparent;
-webkit-background-clip: text;

Both webkit-text-fill-color and background-clip (without vendor prefix) are supported by all major browsers except Internet Explorer in 2022), but we can still use a static font color as a fallback and make sure it doesn't look messed up. And we can set a smaller gradient size so that all colors are visible on the letters at once.

We will use a linear gradient again, so that every letter can have all of the colors (at least, as long the text is only on one line).

.rainbowtext {
  color: red; /* fallback color */
  background: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
  /* magic workarounds for modern browsers */
  -webkit-text-fill-color: transparent;
  background-clip: unset;
  -webkit-background-clip: text;
  /* make all colors visible at once */
  background-size: 100% 60%;
}

Animation

Finally, we can even animate our gradient...

.rainbowtext { /* ... */
  animation: AnimateTextGradient 7s ease infinite;
}

@keyframes AnimateTextGradient {
  0% { background-position: 50% 0; }
  50% { background-position: 50% 100%; }
  100% { background-position: 50% 0; }
}

Check this codepen to see it in action!

What's next in CSS?

I will share some more examples how to make use of new and underrated CSS features in this DEV blog series:

Comments

[GrahamTheDev]

That animated rainbow text GIF at the beginning of the article took me right back to the 90s when that was considered cool and good design! 🤣 Oh how far we have come with the smooth animations in the codepen!

Fun article and happy new year! ❤

[Ingo Steinke]

Yes, the current CSS animations are much smoother than GIFs used to be, and the animation on my portfolio website is even more elegant and much more subtle, but somehow I loved to proceed with the simple colors and give it a vintage retro touch! 🌈🤖

And did you know that you can use GIMP to export image layers as animation frames in GIF files? 🤓😂

I have updated the article and mentioned the contrasting colors as a vintage retro feature on purpose, just in case some people start wondering.