How to Create Text Color Animation using HTML and CSS ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.