# Gradient text

> Text filled with a slowly flowing gradient.

Component · Pro · https://lodeui.com/components/gradient-text

## When to use

- One accent word or a hero headline.

## When not to use

- Body text: contrast varies across the gradient.

## Installation

```bash
npx shadcn@latest add @lode/gradient-text
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="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.

## Related

- [Shimmer text](https://lodeui.com/components/shimmer-text) — Text with a light sweep, for thinking and loading states.
- [Text reveal](https://lodeui.com/components/text-reveal) — Text that rises out of a blur, word by word, as it scrolls into view.
- [Word rotate](https://lodeui.com/components/word-rotate) — Cycles words in place with a blur-slide while the width springs to fit.