Gradient Text

Free

CSS 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 → #b0561fright
Copper
#f2a65a → #e0576bbr
Bone
#f1ede7 → #6e6a64bottom
Gradient Text

CSS gradient text with configurable colors, direction, and HTML element.

Free component

Free at launch — join the waitlist and unlock it day one.

Join the waitlist

No card required.

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.