DEV Community

Cover image for How to create animating gradients in CSS easy way.
Tejashwa Rajvardhan
Tejashwa Rajvardhan

Posted on

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.

Image description

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%);
Enter fullscreen mode Exit fullscreen mode

And the result will be:

Image description

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;
Enter fullscreen mode Exit fullscreen mode

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

Image description

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:

Image description

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%;
Enter fullscreen mode Exit fullscreen mode

Now, let's add the css animation:

animation: bg-animations 2s infinite alternate;
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Image description

View Full Code in Codepen:

Top comments (2)

Collapse
 
andrewbaisden profile image
Andrew Baisden

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

Collapse
 
tejash023 profile image
Tejashwa Rajvardhan

Thank you so much!!