Gradient Text Effect

<h2 class="gradient-text">
  CodeRipple
</h2>

.gradient-text{
  display:inline-block;
  margin:0;
  font-size:64px;
  font-weight:800;
  line-height:1.1;

  background:linear-gradient(
    90deg,
    #22d3ee,
    #8b5cf6,
    #d946ef,
    #22d3ee
  );

  background-size:300% 100%;
  background-clip:text;
  -webkit-background-clip:text;

  color:transparent;
  -webkit-text-fill-color:transparent;

  animation:gradientTextMove 5s linear infinite;
}

@keyframes gradientTextMove{
  0%{
    background-position:0% 50%;
  }

  100%{
    background-position:300% 50%;
  }
}

How This Gradient Text Effect Works

The Gradient Text Effect creates animated color movement by applying a linear gradient as the background of the heading and clipping that background to the text.

The gradient uses cyan #22d3ee, purple #8b5cf6, and magenta #d946ef, then returns to cyan to help create a smooth looping color transition.

The background-size: 300% 100% makes the gradient much wider than the text itself. This gives the colors enough space to move across the letters during the animation.

The background-clip: text and -webkit-background-clip: text properties restrict the gradient so it only appears inside the shape of the letters. You can learn more about clipping backgrounds to text in the MDN Web Docs guide to background-clip.

The text fill is made transparent using color: transparent and -webkit-text-fill-color: transparent, allowing the animated gradient underneath to remain visible.

The gradientTextMove animation shifts the background position from 0% to 300% over 5s with linear timing, creating a continuous flowing gradient across the heading.

Because the gradient is animated through background-position instead of changing the text itself, the heading remains lightweight and easy to reuse. This technique also makes it simple to adjust the color palette, animation distance, and movement speed without changing the HTML structure.

Customizing This Gradient Text Effect

You can customize the Gradient Text Effect by changing the colors, animation speed, gradient direction, and text size.

• Gradient colors: Replace #22d3ee, #8b5cf6, and #d946ef with your preferred colors.
• Gradient direction: Change 90deg to adjust the direction of the color flow.
• Animation speed: Adjust 5s for faster or slower movement.
• Gradient width: Change 300% to control how widely the gradient spreads.
• Text size: Adjust 64px to fit different headings and layouts.
• Movement range: Modify the background-position values to change how far the gradient travels.

Where to Use This Gradient Text Effect

The Gradient Text Effect works well when you want headings to feel colorful and dynamic while keeping the overall design clean.

• Hero headings: Add animated color movement to important titles.
• Landing pages: Highlight product names or promotional messages.
• Portfolio websites: Make names and project headings more distinctive.
• Developer websites: Add modern styling to technical or creative headings.
• Feature sections: Draw attention to important section titles.
• Dark interfaces: Vibrant gradient colors stand out clearly against dark backgrounds.

Because the effect uses CSS gradients, background clipping, and keyframe animation, the complete color movement works without JavaScript.

If you want a brighter illuminated typography style, check out the Neon Glow Text Effect, which uses layered shadows and a smooth pulsing animation.

Frequently Asked Questions

Does the Gradient Text Effect require JavaScript?
No. The complete animated gradient effect is created entirely with CSS.

How does the gradient appear inside the text?
The background-clip: text property clips the gradient to the shape of the letters while the normal text fill remains transparent.

Can I use different gradient colors?
Yes. Replace the cyan, purple, and magenta values with any colors that match your design.

Can I make the gradient animation faster or slower?
Yes. Change the 5s animation duration to control how quickly the gradient moves across the text.

The Gradient Text Effect combines animated color movement, background clipping, and transparent text fill to create smooth flowing typography. Its CSS-only structure keeps it lightweight and easy to customize for hero headings, landing pages, portfolios, developer websites, and modern interfaces.