How to Create Text Color Animation using HTML and CSS ? Last Updated : 30 Jan, 2024 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: 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: Like Article Suggest improvement Previous Multi Factor authentication Card using Tailwind CSS Next Text Animation with changing the color of the text using HTML and CSS Share your thoughts in the comments Add Your Comment Please Login to comment...