Animating text gradients with CSS

GIVING TEXT SUPERPOWERS WITH CSS.

Every website must contain writings about whatever they are about. In creating websites, a frontend deeveloper has to tweak texts to give an appealing look with CSS.

Animating text gradients with css

Gradients are way of combining two or more colors together, through progressive transitions i.e when two colors are combined, they are not combined in equal ratios, they mix fade into their colors progressively.

An example of equal ratio,

An example of progressive transitions (gradients)

Steps in animating text gradient

i. Add the background property in your desired selector, and determine the type of gradient you would like to use.
you can view types of gradients and their examples here For this article i will be using a background property called linear-gradient.
Select two or more colors you want to work with, and add them.
The resulting code should look like

.selector{
background: linear-gradient(#6bc5f8, #cf59e6);
}

Using linear-gradients, you can specify the direction you would like the colors to transit in.
For example, to top, to bottom, to top right, to top left, to bottom left
You can also specify the directions in angles.

Here is the format ;
.selector{
background: linear-gradient((DIRECTION), (Color1), (Color2), ... (Color-n))
}
For this article, i will specify the directions in angles
The resulting code should be

.selector{
background: linear-gradient( -46deg, #6bc5f8, #cf59e6);
}

ii. Add the CSS background clip: text; and background size: 400% 400%; to your selector. This property tells the background to take the shape of the text it covers.
This CSS property is not accepted by all browsers, so we have to add another property to make it function properly on most browsers.

The resulting code once again would look like this:

.selector{
background: linear-gradient( -46deg, #6bc5f8, #cf59e6);
background-clip: text;
background size: 400% 400%;
-webkit-background-clip: text;
}

iii. With the above steps, you have successfully created a text-gradient. You just have to add a color property to your selectors, so that your text color will not affect the gradient. And you can do so by adding -webkit-text-fill-color: transparent; to your code.
This gives:

.selector{
background: linear-gradient( -46deg, #6bc5f8, #cf59e6);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

With this you have successfully created a text gradient with CSS.
You have to know that text gradients are not animatable with CSS, so animating it would be a matter of adding some tricks (Why not, we are in css-tricks.com)

ANIMATING THE TEXT GRADIENT.

Steps:
i. Like all animations in CSS, you will have to give your selector the animation property, which includes animation name, animation-duration, animatio-iteration-count(This is a property that determines how many times the animation will run. We are writing code for a text gradient so the animation should run infinitely.), animation-timing-function

The resulting code will be

.selector{
background: linear-gradient( -46deg, #6bc5f8, #cf59e6);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: textGradient;
animation-duration: 2s,
animation-iteration-count: infinite;
animation-timing-function: ease;
}

Step ii.

We go ahead to create keyframes (In case you don't know, keyframes are how animations are written in CSS. Here is a Link to read about it)

Read carefully from here on.
The trick to successfully animating a text gradient is changing their background positions.
this CSS property sets the initial position for each background. and the position is relative to its layer.
Read about background property here

This would be the final Code for the keyframes animations

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

Explaining this code, we have

0%{
background-position: 0% 50%
}

This is relative to the animation-duration property. It means at 0% of 2s, Which is 0% i.e the start of the animation, Set the background-position to 0% 50%

50% {
background-position: 100% 50%;
}

It means at 50% of 2s, Which is 50% i.e 1s of the animation, Set the background-position to 100% 50%

100% {
background-position: 0% 50%;
}

This means at 100% of 2s, Which is 100% i.e end of the animation, Set the background-position to 0% 50%

With this, you have successfully animated a text gradient

Please comment on any questions you have, and i will try answering them as best as i can.