How to create a text with a gradient animated color using CSS

• Bloggen
• >
• CSS tutorials
• >
• How to create a text with a gradient animated color using CSS

Have you ever wanted to add some eye-catching animations to the text on your website? With pure CSS, it’s easier than you might think to create a gradient animated color effect. This tutorial will show you how to achieve this effect and provide some usage examples along the way.

Syntax Definition

In order to create a gradient animated color with pure CSS, you will need to use a few different properties. Here is a list of the key properties you will need to use:

• background-image
• background-clip
• text-fill-color
• animation

The background-image property is used to create the gradient effect and the background-clip property is used to limit the gradient to the text area. The text-fill-color property sets the initial color of the text, while the animation property is used to create the animation effect.

Usage Examples

Here are a few examples of how you might use this gradient animated color effect on your website:

Example 1

Let’s say you have a headline on your website that you want to emphasize. You could apply the gradient animated color effect to the text to make it stand out. Here is an example of what the code might look like:

    <h1>Amazing Headline!</h1>

    .gradient-text {
      background-image: linear-gradient(to right, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-clip: text;
      -webkit-background-clip: text;
      text-fill-color: transparent;
      animation: gradient 15s ease infinite;
    }

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

In this example, we have wrapped the text in an <h1> tag and added the class gradient-text to it. Then, in our CSS, we have defined the gradient effect using the background-image property and limited the gradient to the text area using background-clip. We have also set the initial color of the text with text-fill-color, but made it transparent so that the gradient effect can be seen through it. Finally, we have applied an animation using animation that continuously moves the gradient across the text using a keyframe animation defined with @keyframes.

Example 2

Another use case for this effect might be to draw attention to a call to action button on your website. In this example, we will apply the gradient animated color effect to the text within a button tag. Here is an example of what the code might look like:

    <button class="gradient-button">Click Me!</button>

    .gradient-button {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      font-size: 18px;
      color: #fff;
      background-color: #1abc9c;
      background-image: linear-gradient(to right, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-clip: text;
      -webkit-background-clip: text;
      text-fill-color: transparent;
      animation: gradient 15s ease infinite;
    }
  

In this example, we have added the class gradient-button to a button tag and wrapped the text we want to animate in a <span> tag with the class gradient-text. We have also defined some basic button styles with CSS. The gradient animated color effect is applied in the same way as it was in the previous example, but this time, we have also defined some additional button styles.

For more ideas on how you might use the gradient animated color effect on your website, check out CodePen for some inspiration.

  Written by: Maria Jensen     23-06-2023     Written in: CSS tutorials