Learn how to create a modern and eye-catching text animation using pure CSS. This tutorial shows you how to apply a moving rainbow gradient to your text, making your website or blog headings stand out with smooth and colorful animation—no JavaScript needed!

Stylish CSS Text Animation

Here is a simple CSS animation that creates a moving rainbow gradient effect on text. It looks modern and eye-catching, perfect for headings or highlights on your website or blog.

HTML Code 
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>CSS Text Animation</title>

<style>

  body {

    background: #121212;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    margin: 0;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    color: #fff;

  }

  .animated-text {

    font-size: 3rem;

    font-weight: bold;

    background: linear-gradient(270deg, #ff6a00, #ee0979, #00f260, #0575e6);

    background-size: 800% 800%;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: gradientAnimation 8s ease infinite;

  }

  @keyframes gradientAnimation {

    0% {

      background-position: 0% 50%;

    }

    50% {

      background-position: 100% 50%;

    }

    100% {

      background-position: 0% 50%;

    }

  }

</style>

</head>

<body>

  <div class="animated-text">Stylish Animated Text</div>

</body>

</html>

Copy and paste this code in your HTML file or blog post to see the animation in action.