Gradient Text
FreeCSS gradient text with configurable colors, direction, and HTML element.
Text · primitive · basic · none · zero dependencies
gradient-text Text·preview
Prompts that build it first try
Ember
#ffc98a → #b0561frightCopper
#f2a65a → #e0576bbrBone
#f1ede7 → #6e6a64bottomGradient Text
CSS gradient text with configurable colors, direction, and HTML element.
Use it for
- SaaS landing page headline
- pricing page save-percentage highlight
- hero section brand-color heading
- feature section eyebrow text
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Text content to render with the gradient. |
className | string | — | Additional classes for font size, weight, and layout. |
from | string | "#a78bfa" | Starting gradient color. |
via | string | — | Optional middle gradient color stop. |
to | string | "#818cf8" | Ending gradient color. |
direction | "right" | "left" | "top" | "bottom" | "br" | "tr" | "right" | Gradient direction — maps to a CSS linear-gradient angle. |
as | "span" | "h1" | "h2" | "h3" | "h4" | "p" | "span" | HTML tag rendered for the element. |
FAQ
Does Gradient Text work with Next.js App Router?
Yes. It ships as a "use client" component for consistency with the rest of the library, and works unchanged in the App Router.
Are there any dependencies to install?
None. It's a single CSS gradient clipped to text — no external packages required.
Is it responsive?
Yes. Font size is controlled entirely by your own Tailwind classes via className, and the gradient scales with the text box at any size.
Does it respect prefers-reduced-motion?
There's nothing to disable — the component has no animation, so it's inherently safe for motion-sensitive users.