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
TypingAnimationfor a double-layered text effect.
Beautiful Gradient Text
🔥 Hot Take
New
Feature Available
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 — Character-by-character text reveal.
- TextReveal — Word-by-word scroll-triggered text reveal.
- ShimmerButton — Animated gradient shimmer on a button.