Animated Gradient Text in CSS

Turn a plain heading into a smoothly shifting gradient using nothing but CSS and background-clip: text. Great for hero titles, brand names, and standout callouts.

By Dillon LaGamma · HTML · CSS

The code

Add the gradient-text class to any heading, then include the CSS below.

<h1 class="gradient-text">Dillon LaGamma</h1>

<style>
  .gradient-text {
    background: linear-gradient(90deg, #017CFF, #00D4FF, #017CFF);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shine 4s linear infinite;
  }

  @keyframes shine {
    to { background-position: 200% center; }
  }
</style>

How it works

The trick is background-clip: text, which clips the element's background so it only shows through the shape of the letters. We set color: transparent so the text itself doesn't cover the gradient.

Making the gradient 200% wide gives us room to slide it. The shine keyframe animates background-position across that extra width, creating a continuous shimmer. Adjust the 4s duration to speed it up or slow it down.

When to use it

• Hero headlines where you want one word or name to pop.
• Text-based logos and wordmarks.
• Section labels, badges, or "new" tags.

Keep the two end colors of the gradient identical (here, #017CFF) so the loop is seamless with no visible jump.