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.

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 even specify the gradient direction in natural language and add "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, and 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 (also) 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: rainbow; /* fallback color (invalid) */  color: red; /* actual 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: