Animated Gradient Text: Breathe life into your typography

Introduction

One of the ways to bring your website to life and engage your visitors is to add animations to your typography. In particular, text gradient animations can transform your text from static to dynamic, creating a captivating visual experience. This is a typographical effect where the color of the text shifts in a gradient pattern, producing an animation that’s both unique and eye-catching.

This article will walk you through two ways to achieve this effect:

Method 1: How to add this effect with code
Method 2: How to add this effect without touching code by using PageGPT

We’ll also show you how you can easily customize the effect so that it matches your website

Whether you’re a seasoned coder or a beginner, you’ll find this guide useful. Let’s dive in.

Adding Text Gradient with Code

The primary way to add text gradient animations is by using CSS (Cascading Style Sheets), which allow you to style the HTML content of your website. Here’s an codepen example of how to achieve this:

See the Pen Animated Gradient Text by PageGPT (@pagegpt) on CodePen.

You can duplicate the pen and try it out yourself. Here’s how it was done, we’ll explain every single part of the animation. We have a simple HTML block with just the text inside of our container

<div class="container">
  <p>Lorem Ipsum</p>
</div>

Next, we add some CSS to define the animation, and apply it to our text.

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

p {
  background: linear-gradient(
    270deg,
    #5c7aff 30%,
    #73fbd3 70%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 200% auto;
  animation: animatedGradient 3s ease-in-out infinite alternate;
}

Let’s break it down.

First, background sets a linear gradient as the background image, starting with a teal color (#5c7aff) and ending with a blue color (#73fbd3). The 270deg specifies the direction of the gradient.

background-size: 200% auto; makes the gradient larger than the text.

As you can see, the teal color now makes up most of what you see, and the rest of the blue color is actually to the right but it’s hidden since the background is larger than the text.

This helps achieve the animation effect as there is now allowance for the colours to move. Which brings us to the next step

animation: animatedGradient 3s ease-in-out infinite alternate; applies the animatedGradient animation to the background color. It lasts for 3 seconds, eases in and out, repeats infinitely, and alternates direction each cycle.

0% 50% and 100% 50% are the starting and ending positions of the animation. The first value in each pair (0% and 100%) refers to the horizontal position, while the second value (50%) refers to the vertical position.

At the start of the animation (0%), the horizontal position of the background gradient is at the leftmost edge (0%), and the vertical position is at the middle (50%). This is why the animation starts with background-position: 0% 50%;.

At the end of the animation (100%), the horizontal position of the background gradient shifts to the rightmost edge (100%), while the vertical position stays the same (still 50%). This is why the animation ends with background-position: 100% 50%;.

Finally, let’s put the animation effect into the text itself with the following properties:

-webkit-background-clip: text; and background-clip: text; are properties that make the background clip to the foreground text. They make the background gradient visible only where the text is present.

-webkit-text-fill-color: transparent; and text-fill-color: transparent; ensure the original color of the text is transparent, allowing the gradient to show through.

The CSS code snippet above specifies an animation that continually shifts the background color of a paragraph text, producing a captivating gradient effect.

Customizing Your Animated Gradient Text

There are many ways to customize your text gradient animation. Let’s explore some of them:

1. Colors: The gradient effect involves transitioning between different colors. In the example code above, we have four colors (#5c7aff, #73fbd3), each occupying a percentage of the width of the text. You can change these colors or add more to suit your design.
2. Speed: The animation property defines how long the transition between colors should take. In our example, it’s set to 5 seconds (5s). You can increase or decrease this duration to change the speed of the animation.
3. Direction: The linear-gradient function defines the direction of the gradient. You can change it to to left, to bottom, to top, and so on, depending on the direction you want the gradient effect to move.
4. Looping: The infinite keyword in the animation property ensures the animation repeats indefinitely. If you want the animation to run a specific number of times, replace infinite with the desired number.
5. Variation: The alternate keyword causes the animation to reverse direction each cycle, creating a back-and-forth effect. Removing this keyword will make the gradient move in one direction only.

You can experiment with these properties in a playground like CodePen to see the effects in real time.

Adding Animated Gradient Text Without Any Code

Not everyone who designs websites or digital content is comfortable with coding. Fortunately, there are AI tools like PageGPT that can help you achieve the same effects without writing a single line of code.

Simply describe the kind of animated gradient text you want in natural language, and PageGPT will generate it for you. In the above example we simply entered: “add a gradient animation for the text from left to right and right to left from 5c7aff color to 73fbd3 color on loop,” and PageGPT created it for us!

Conclusion

Animated text gradient is a compelling way to enhance the visual appeal of your digital content. With a few lines of CSS, you can create a unique, dynamic typographical effect that will captivate your audience. And even if you’re not into coding, AI-powered tools like PageGPT have got you covered. So, go ahead and breathe some life into your typography with text gradient animations.

If you’d like to learn more about other effects that you can easily add to your page, check out our article on unique parallax effects, animated scrolling effects and website background animation effects.