Gradient textPro
Text filled with a slowly flowing gradient.
Ship it beautiful.
Works on any text: a single word, or a whole headline.
When to use
- One accent word or a hero headline.
When not to use
- Body text: contrast varies across the gradient.
Installation
Usage
Import it from @/components/ui/gradient-text after installing.
example.tsx
import { GradientText } from "@/components/ui/gradient-text";
<GradientText as="h1" className="text-6xl font-semibold">Ship it beautiful.</GradientText>API reference
GradientText
A text element filled with a moving gradient. Accepts span attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | – | Repeat the first color last for a seamless loop. |
| speed | number | 6 | Seconds per sweep; 0 is still. |
| as | "span" | "h1" | "h2" | "h3" | "p" | "span" | Element. |
Accessibility
- Real text, so it's selectable and read normally.
- Still under reduced motion.
- Check contrast of every color against the background.
Motion
- The gradient pans continuously.
Responsive behavior
- Inline; wraps normally.
Performance
- A CSS animation; the keyframes are added once to the page head.
Notes for AI
- Use saturated mid-tones that pass contrast on both themes.
This page as Markdown, for assistants and coding agents:
/components/gradient-text/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt