Create Stunning Animated Gradient Text with Pure CSS

Introduction

The author was asked to redesign the homepage text and decided to create an eye‑catching animated gradient text effect.

How to Achieve It

The effect is built by layering gradient colors, a flowing background animation, and a slight scaling (pulse) animation.

Basic Effect: Text Gradient

CSS does not support gradients on text directly, but using background: linear-gradient(...), background-size, -webkit-background-clip: text, and -webkit-text-fill-color: transparent creates the gradient text.

.gradient-text {
  font-size: 28px;
  background: linear-gradient(45deg, #f9d423, #ff4e50, #7b4397, #00c6ff);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

linear-gradient(...)

: defines direction and colors. background-clip: text: clips background to text shape (requires -webkit- prefix). text-fill-color: transparent: hides original text color.

Resulting markup:

<h1 class="gradient-text">Your animated text here</h1>

Background Shift: Flowing Gradient

To make the gradient move, define a @keyframes gradient-shift animation that changes background-position over time.

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Apply it to the text:

animation: gradient-shift 8s ease infinite;

Adding Breath: Pulse Scale Animation

A subtle scaling animation adds a breathing effect.

@keyframes pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

Combine both animations in the class:

.gradient-text {
  font-size: 48px;
  font-weight: bold;
  background: linear-gradient(45deg, #f9d423, #ff4e50, #7b4397, #00c6ff);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 8s ease infinite, pulse 2s infinite alternate;
}

Full Code

<style>
.gradient-text {
  font-size: 28px;
  background: linear-gradient(45deg, #f9d423, #ff4e50, #7b4397, #00c6ff);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 8s ease infinite, pulse 2s infinite alternate;
}
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}
</style>
<h1 class="gradient-text">生命不息，奋斗不止，以梦为马，不负韶华。</h1>

Summary

Using background-clip: text and -webkit-text-fill-color: transparent creates a gradient text effect.

Adding @keyframes animations makes the gradient flow.

Applying a scaling transform animation gives the text a breathing feel.