Text Colour Animation Effect

Text Colour Animation Effect


text colour animation effect

Introduction: Adding animated effects to text can make your website more visually appealing and engaging. In this article, we’ll explore how to create a text color animation effect using CSS. We’ll provide a code example that demonstrates a gradient color animation effect on the text.

Text animation effects can bring life to your website’s typography. With CSS, you can create various animation effects, including changing the color of the text. Let’s see how we can achieve a gradient color animation effect on text using CSS.

To begin, create an HTML document and include the following code:

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Text Color Animation Effect</title>
body {
display: grid;
place-items: center;
height: 100vh;

.animate-character {
background-image: linear-gradient(
#231557 0%,
#44107a 29%,
#ff1361 67%,
#fff800 100%
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
color: #fff;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textclip 2s linear infinite;
display: inline-block;
font-size: 4rem;

@keyframes textclip {
to {
background-position: 200% center;
<div class="animate-character">webdeveloperblogs</div>

In the code above, we have a simple HTML document containing a div element with the class "animate-character". This is where our animated text will be displayed.

The CSS styles defined within the <style> tags are responsible for creating the text color animation effect. Here's a breakdown of the key CSS properties used:

  • background-image and background-clip are used to apply a gradient background to the text.
  • color is set to #fff to make the text white.
  • text-fill-color and -webkit-text-fill-color are set to transparent to make the text transparent.
  • animation is used to apply the animation effect named "textclip". It has a duration of 2 seconds, linear timing function, and is set to repeat infinitely.
  • @keyframes defines the animation effect named "textclip". In this case, it animates the background-position property from the initial position to 200% to create a smooth gradient animation.

When you open the HTML document in a browser, you’ll see the text “webdeveloperblogs” with a gradient color animation effect applied to it. The gradient colors specified in the background-image property will transition smoothly across the text, creating an eye-catching effect.

Conclusion: In this article, we explored how to create a text color animation effect using CSS. By applying a gradient background and animating the background-position property, we achieved a visually appealing animation on the text. Feel free to experiment with different colors, gradients, and animation properties to create your own unique text animation effects on your website.

Post a Comment

Previous Post Next Post