Gradient Text
betaText filled with a gradient of theme colours that can drift slowly across the letters — still one run of real, selectable text.
- Effects & motion
- 1 file
- No extra npm packages
- Accessibility notes
Build interfaces that feel alive
pnpm dlx @dowel-ui/cli add gradient-textNo npm packages are needed beyond what Dowel already requires.
import { GradientText } from "@/components/ui/gradient-text";Default
Warm
<GradientText>
| Prop | Type | Default |
|---|---|---|
angleDirection of the gradient, in degrees. Default 90. | number | 90 |
animateDrift the gradient across the text. Default true. | boolean | true |
asThe element to render. Default "span". | GradientTextElement | "span" |
colorsThe gradient's colours, in order: tokens or CSS colours. Default primary → info → primary. | readonly string[] | DEFAULT_COLORS |
durationSeconds per drift cycle. Default 6. | number | 6 |
Plus every attribute of <span> except color.
The text is never split or replaced: it reads, selects and copies as written. The drift is decoration and holds still under reduced motion. In forced-colours mode the gradient is dropped and the text takes the system colour. Choose colours that each meet contrast against the background — the gradient passes through all of them.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes