How to create animating gradients in CSS easy way.

A gradient is a continuation of colors with a starting and stopping point and a linear-gradient gradually moves in a straight line to another color.

Animation in Gradients are the latest trends these days and most of the websites are designed using gradients. With the background-clip property, and animations of CSS, it's very easy to implement animating text gradients.

Syntax: How to create Animating Text gradients
First, we have to set up a font using h1 or any tag of our choice and place it at the desired location. I have placed my font in the center using a flexbox.

The result can be achieved with the help of

1. linear-gradient()
2. background-clip
3. text-fill-color
4. animation

1.Linear-gradient() property:
As explained above, this property creates a background linear gradient on the text block.
In CSS, linear-gradient is implemented using:

background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

And the result will be:

2.background-clip() property:
This CSS property sets whether an element's background extends underneath its border-box, padding-box, or content-box.

background-clip: text;

And after applying this property, our text will look like:

The background is painted within (clipped to) the foreground text.
Due to the text-color, we cannot see our linear gradient color, and then comes the use of our third property.

3.text-fill-color property:
Since we want to see the linear-gradient which is clipped to the foreground text, we have to make the color of the text transparent and the outcome will be:

Now, let us put some animations to achieve our desired result.
For this we will increase the background size of the gradient so that when we make the animation we can see the effect clearly.

background-size:300%;

Now, let's add the css animation:

animation: bg-animations 2s infinite alternate;

Here, bg-animation is the name of the keyframe which we will use to animate. You can name it anything you like.

Now we will create out keyframe animation as below:

@keyframes bg-animations{
  0%{
    background-postion:left;
  }
  100%{
    background-position:right;
  }
}

And voila, we are done. You can see you your gradients animating:

View Full Code in Codepen:

Comments

[Andrew Baisden]

Nice really cool demo and not that many lines of code.

[Tejashwa Rajvardhan]

Thank you so much!!