Gradient Text

Heading text with a slowly flowing gradient fill.

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

Also accepts all props of React.ComponentProps<"span">

Prop	Type	Default	Description
colors	`string[]`	`["#f97316", "#ec4899", "#8b5cf6", "#06b6d4", "#f97316"]`	Gradient stops, left to right
duration	`number`	`6`	Seconds per full cycle

$ npx shadcn@latest add https://chromotion.dev/r/gradient-text.json

The CLI installs the base component; your customizations live in the code generated on the Customize tab.