Text Color Animator

Create eye-catching animated text with gradients or color fades.

Animated Text

Speed (seconds): 5s

<!-- HTML -->
<h1 class="animated-text">Animated Text</h1>

/* CSS */
.animated-text {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animated-text-gradient 5s linear infinite;
}

@keyframes animated-text-gradient {
  to { background-position: 200% center; }
}