gradient-text

A gradient that drifts through a headline. Part of motion-anything; obeys MOTION-SPEC.md. Technique popularized by Magic UI, reimplemented dependency-free (pure CSS).

When to use it

• One hero word / short headline / brand name / key metric you want to feel premium.

When NOT to use it (restraint)

• Body copy or long text — it hurts readability and contrast. One short phrase per view.
• When guaranteed color contrast is required for accessibility.

How to apply

1. Copy gradient-text.css into the project and link it.
2. Wrap the phrase:

html <h1><span class="gradient-text">motion, anything</span></h1>

1. Set brand colors via --g1/--g2/--g3; tune the duration (default 6s).

Accessibility & performance

• Under prefers-reduced-motion the drift stops and the text renders in a solid --g1 color.
• Animates background-position of a text-clipped gradient — GPU-safe.

Framework notes

• Pure CSS; works in any framework. Keep the base --g1 readable as the reduced-motion fallback.