text

GradientText

Renders text with an animated gradient sweep across the background. Great for eye-catching headlines and brand-colored accent text.

v1.0.0react >=18next >=14tailwind >=4motion >=12

textgradientcolorheadlinebrandanimated

Preview

Loading preview...

Props

Prop	Type	Default	Description
`children*`	`ReactNode`	`—`	Text content to render with a gradient
`colors`	`string[]`	`["#ee502c", "#f97316", "#eab308", "#ee502c"]`	Array of CSS color values for the gradient stops
`speed`	`number`	`3`	Animation cycle duration in seconds
`animate`	`boolean`	`true`	Enable animated gradient sweep
`className`	`string`	`—`	Additional Tailwind classes
`id`	`string`	`—`	HTML id attribute

Slots

Slot	Type	Required	Description
`children`	`ReactNode`	Yes	The text content displayed with the gradient effect

Layout

Display: inline

Responsive: No

Renders as an inline span. Use inside any heading, paragraph, or inline context.

Examples

Basic gradient headline

<h1 className="text-5xl font-bold">
  <GradientText>Build the future</GradientText>
</h1>

Custom brand colors

<GradientText colors={["#6366f1", "#a855f7", "#ec4899", "#6366f1"]}>
  Premium Plan
</GradientText>

Slow sweep with custom speed

<GradientText speed={6} colors={["#22d3ee", "#3b82f6", "#8b5cf6", "#22d3ee"]}>
  Enterprise Grade
</GradientText>

Static gradient (no animation)

<GradientText animate={false} colors={["#f59e0b", "#ef4444"]}>
  Hot Deal
</GradientText>

AI Usage Hint

Use GradientText for eye-catching headlines. Pass brand colors via the colors prop. Works as inline text — wrap any heading or span. Combine with TypeWriter for typed gradient text. Repeat the first color at the end for seamless looping.

Works Well With

TypeWriterFadeUpSplitText