Open In App

How to Create Text Color Animation using HTML and CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

The text color can be changed according to the programmer’s choice using CSS @keyframes rule. In this article, we will see how to create text color animation using HTML and CSS.

Preview:

Screenshot-2024-01-09-111027

Approach:

  • Create an HTML file with a centered <div> containing an <h2> element.
  • Use CSS to reset default margin and padding for the body.
  • Center the <div> element using absolute positioning and ‘transform’.
  • Style <h2> with desired properties and apply a color animation using keyframes.
  • Create a gradient background animation within keyframes, and use ‘-webkit-background-clip’ for text clipping.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Text Color Animation</title>
 
    <style>
        body {
            margin: 0;
            padding: 0;
        }
 
        div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
 
        h2 {
            font-size: 5em;
            font-family: serif;
            color: transparent;
            text-align: center;
            animation: effect 2s linear infinite;
        }
 
        @keyframes effect {
            0% {
                background: linear-gradient(#008000, #00FF00);
                -webkit-background-clip: text;
            }
 
            100% {
                background: linear-gradient(#3CE7D7, #000FFF);
                -webkit-background-clip: text;
            }
        }
    </style>
</head>
 
<body>
    <div>
        <h2>GeeksforGeeks</h2>
    </div>
</body>
 
</html>


Output:

erf



Last Updated : 30 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads