Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Create Text Color Animation using HTML and CSS ?

  • Last Updated : 11 Aug, 2021

The text color can be changed according to programmer’s choice using CSS @keyframes rule.

HTML Code: The following code snippet creates HTML div element which contains the text for modification.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




<!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>
</head>
<body>
  <div>
    <h2>GeeksforGeeks</h2>
  </div>
</body>
</html>

CSS Code: The following code snippets demonstrates the design of the text using some basic CSS properties along with CSS @keyframes rule to change the color of the text to produce the animation effect.




<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>

Complete Code: It is the combination of the above two code sections.




<!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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!