# AnimatedGradientText

Source: https://lumeo.nativ.sh/components/animated-gradient-text

# AnimatedGradientText

Text with a multi-stop gradient that shifts hue over time. Pure CSS via animated background-position.

## When to Use

-   Hero headings that need to pop without heavy motion.
-   Labels, badges, or taglines that benefit from a premium feel.
-   Combine with `TypingAnimation` for a double-layered text effect.

Preview Code

Default Gradient

Beautiful Gradient Text

Copy Code

Preview Code

Custom Colors & Speed

🔥 Hot Take

Copy Code

Preview Code

As a Badge / Label

New Feature Available

Copy Code

## API Reference

Property

Type

Default

Description

ChildContent

RenderFragment?

null

The text or elements to apply the gradient to.

Gradient

string

primary → sky → primary

Comma-separated CSS color stops for the gradient.

AnimationDuration

string

"4s"

Duration of one full gradient cycle.

BackgroundSize

int

200

Background-size percentage — higher = slower apparent shift.

## Related Components

-   [TypingAnimation](/components/typing-animation) — Character-by-character text reveal.
-   [TextReveal](/components/text-reveal) — Word-by-word scroll-triggered text reveal.
-   [ShimmerButton](/components/shimmer-button) — Animated gradient shimmer on a button.