# Gradient Text

> Give one short headline quiet premium emphasis: a slow on-brand gradient drifts through the type. One phrase per view; never body copy (readability). Pure CSS; falls back to a solid brand color under prefers-reduced-motion.

- Skill: `nexu-io/gradient-text` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add nexu-io/gradient-text`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nexu-io/gradient-text/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Nexu (https://skillmd.com/u/nexu-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nexu-io/gradient-text

---


# gradient-text

A gradient that drifts through a headline. Part of
[motion-anything](https://github.com/nexu-io/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>
   ```
3. 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.