Animated text gradient

This effect creates an animated gradient text using CSS background-clip: text. The gradient smoothly flows through multiple rainbow colors, creating a vibrant animated effect.

How It Works

The technique uses a large gradient background that moves behind the text, creating the illusion of the colors flowing through the letters. By setting background-size to 200%, we create extra gradient space that can be animated by shifting background-position.

HTML

<h1>Animated text gradient</h1>

CSS

html, body {
  height: 100%;
}

h1 {
  font-size: 3em;
}

body {
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Rubik", sans-serif;
}

:root {
  --color1: #FF9999;
  --color2: #FFB366;
  --color3: #FFFF99;
  --color4: #99FF99;
  --color5: #99CCFF;
  --color6: #B399CC; 
  --color7: #CC99FF;
}

@keyframes gradient-animation {
  from {
    background-position: 200% center;
  }
  
  to {
    background-position: 0 center;
  }
}

h1 {
  background: linear-gradient(
    to right,
    var(--color1),
    var(--color2),
    var(--color3),
    var(--color4),
    var(--color5),
    var(--color6),
    var(--color7),
    var(--color1)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-animation 3s linear infinite;
  background-size: 200%;
}

Key Techniques

• CSS Custom Properties (Variables) - Seven color variables for easy customization
• Linear Gradient - Creates the rainbow color transition with the first color repeated at the end for seamless looping
• Background Clip - background-clip: text clips the gradient to the text shape
• Text Fill Color - -webkit-text-fill-color: transparent makes the text transparent to show the gradient
• Background Size - Set to 200% to create enough gradient space for animation
• Animation - Shifts background-position from 200% to 0 for continuous flowing effect

Browser Support

This effect works in all modern browsers. For older browsers, the text will simply display in a solid color.

Tutorial

Watch the YouTube Short for a step-by-step guide on how to create this animation.