Gradient Text

Animated gradient sweep across live text with speed and color control.

Default

Every prop is wired to the controls underneath. Change the number of colors, then edit each stop.

Gradient Magic

Color 1

Color 2

Color 3

Color Count3

Animation Speed8s

Direction

YoyoPause on HoverShow Border

Prop	Type	Default	Description
`default slot`	`VNode`	-	The content to be displayed inside the gradient text.
`colors`	`string[]`	`["#5227FF", "#FF9FFC", "#B497CF"]`	Array of colors for the gradient effect.
`animationSpeed`	`number`	`8`	Duration of one animation cycle in seconds.
`direction`	`'horizontal' \| 'vertical' \| 'diagonal'`	`'horizontal'`	Direction of the gradient animation.
`pauseOnHover`	`boolean`	`false`	Pauses the animation when hovering over the text.
`yoyo`	`boolean`	`true`	Reverses animation direction at the end instead of looping.
`showBorder`	`boolean`	`false`	Displays a gradient border around the text.

Keyboard shortcuts and ARIA behavior.

The text stays real text, so it is selectable and read by screen readers. Pick colors with enough contrast against the background.