Text Gradient
The TextGradient component creates text with animated gradient effects and various animation styles. It's perfect for creating eye-catching headings and text elements with dynamic color transitions.
The gradient itself is a linear-gradient (or radial-gradient) painted into a background-clip: text box, so the fill is the text. colors and direction shape the gradient, size sets how much of it is in view, and animation decides whether it stays still, drifts, swells, or cycles. Everything animates through motion-v variants, which makes it smooth on the GPU and easy to pause.
Usage
Transform Your Digital Experience
Create stunning interfaces with our collection of animated components that enhance user engagement and drive results.
Blazing quick
Tuned for speed with minimal load times
Beautiful Effects
Stunning animations that captivate your audience
Plug-in ready
Quick to add with clean, well-documented code
<template>
<div class="p-8">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6">
<MTextGradient
text="Transform Your Digital Experience"
animation="wave"
:speed="0.5"
class="block"
/>
</h1>
<p class="text-xl text-muted mb-8">
Create stunning interfaces with our collection of animated components that
<MTextGradient
text="enhance user engagement"
animation="flow"
:speed="0.7"
class="font-semibold"
/>
and drive results.
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
<UCard class="text-center">
<div class="flex justify-center mb-4">
<div class="w-16 h-16 rounded-full bg-primary/10 dark:bg-primary/70 flex items-center justify-center">
<UIcon
name="i-lucide-zap"
class="w-8 h-8 text-primary"
/>
</div>
</div>
<h3 class="text-lg font-semibold mb-2">
<MTextGradient
text="Blazing quick"
animation="pulse"
:speed="0.8"
/>
</h3>
<p class="text-muted text-sm">
Tuned for speed with minimal load times
</p>
</UCard>
<UCard class="text-center">
<div class="flex justify-center mb-4">
<div class="w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
<UIcon
name="i-lucide-sparkles"
class="w-8 h-8 text-purple-600 dark:text-purple-400"
/>
</div>
</div>
<h3 class="text-lg font-semibold mb-2">
<MTextGradient
text="Beautiful Effects"
animation="rainbow"
:speed="0.6"
/>
</h3>
<p class="text-muted text-sm">
Stunning animations that captivate your audience
</p>
</UCard>
<UCard class="text-center">
<div class="flex justify-center mb-4">
<div class="w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
<UIcon
name="i-lucide-code"
class="w-8 h-8 text-green-600 dark:text-green-400"
/>
</div>
</div>
<h3 class="text-lg font-semibold mb-2">
<MTextGradient
text="Plug-in ready"
animation="wave"
:speed="0.9"
/>
</h3>
<p class="text-muted text-sm">
Quick to add with clean, well-documented code
</p>
</UCard>
</div>
<div class="mt-12">
<UButton
size="lg"
color="primary"
class="px-8 py-3 text-lg"
>
Get Started Today
</UButton>
</div>
</div>
</div>
</template>
Examples
Heading
Renders as whatever tag as names, so a gradient can be a real heading instead of a styled span. Pass sizing through class.
Heading Text
<template>
<div class="flex justify-center">
<MTextGradient
text="Heading Text"
as="h1"
class="text-4xl"
/>
</div>
</template>
Gradient directions
direction switches the gradient axis and colors sets the stops. Use radial for a circular wash rather than a linear sweep.
<template>
<div class="grid grid-cols-2 gap-8 p-8 text-center text-2xl font-bold">
<MTextGradient
text="Horizontal"
direction="horizontal"
/>
<MTextGradient
text="Vertical"
direction="vertical"
/>
<MTextGradient
text="Diagonal"
direction="diagonal"
/>
<MTextGradient
text="Radial"
direction="radial"
:colors="['#f472b6', '#a855f7', '#22d3ee']"
/>
</div>
</template>
Animate on hover
With hover the gradient scales up while the pointer rests on the text, which is a good fit for interactive labels and links.
Hover to grow
The gradient scales up while the pointer rests on the text.
<template>
<div class="flex flex-col items-center gap-4 p-8">
<h2 class="text-3xl font-bold">
<MTextGradient
text="Hover to grow"
hover
class="cursor-pointer"
/>
</h2>
<p class="text-sm text-muted">
The gradient scales up while the pointer rests on the text.
</p>
</div>
</template>
Labels and decoration
The root is announced as role="text". Provide aria-label when the visible string is not what you want read aloud, and use hide-from-screen-reader for purely decorative gradients such as a star rating.
The headline carries a custom label; the stars are decorative and hidden from screen readers.
<template>
<div class="flex flex-col items-center gap-6 p-8">
<MTextGradient
text="Announced once"
aria-label="A headline that is announced once"
class="text-3xl font-bold"
/>
<MTextGradient
text="★★★★★"
hide-from-screen-reader
:colors="['#fbbf24', '#f59e0b', '#fbbf24']"
class="text-3xl"
/>
<p class="text-sm text-muted">
The headline carries a custom label; the stars are decorative and hidden from screen readers.
</p>
</div>
</template>
Customize
Customize
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | '' | Text to display with gradient. |
as | string | 'span' | HTML element to render as. |
colors | string[] | ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7'] | Array of colors for the gradient. |
direction | 'horizontal' | 'vertical' | 'diagonal' | 'radial' | 'horizontal' | Direction of the gradient. |
animation | 'wave' | 'pulse' | 'flow' | 'rainbow' | 'static' | 'wave' | Animation type for the gradient. static paints the gradient with no motion. |
duration | number | 3 | Animation duration in seconds, divided by speed to get the loop time. |
speed | number | 1 | Animation speed multiplier. Higher is faster. |
size | number | 200 | Size of the gradient background as a percentage. |
class | string | undefined | CSS classes to apply to the text. |
hover | boolean | false | Enable hover effect, scaling the gradient up while hovered. |
ariaLabel | string | '' | Accessibility label for the text. Defaults to Animated gradient text: <text> when empty. |
hideFromScreenReader | boolean | false | Hide the text from screen readers with aria-hidden. |
reduceMotion | boolean | false | Reduce motion for accessibility. |
ui | object | undefined | Per-slot classes merged over the theme defaults. See UI. |
Slots
| Slot | Props | Description |
|---|---|---|
default | - | The text content. Falls back to the text prop when the slot is empty. |
UI
This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.textGradient in app.config.ts.
| Prop | Type | Default | Description |
|---|---|---|---|
ui | object | - | Per-slot classes merged over the theme defaults. |
| Slot | Props | Description |
|---|---|---|
root | - | text-gradient bg-clip-text text-transparent font-bold |
srOnly | - | sr-only |
Accessibility
The root is a role="text" element labelled through aria-label. When you pass no ariaLabel, the label falls back to Animated gradient text: <text>, and when there is no text either it becomes Animated gradient text — so a screen reader always announces something meaningful rather than the raw colour treatment.
Set hideFromScreenReader to put aria-hidden on the root for decorative gradients, such as a star rating, where a neighbouring caption carries the meaning.
Motion respects accessibility: the component reads prefers-reduced-motion on mount and freezes the gradient for users who ask for it, and you can force the same with reduceMotion.
Performance
- The gradient is a CSS
background-imageclipped to the text, so the fill costs no extra DOM nodes — the glyphs are painted once. - Animation runs through
motion-vvariants onbackground-positionandbackground-size; the visual update is a paint on the text box rather than a layout reflow. prefers-reduced-motionandreduceMotionboth return an empty transition, which stops the loop instead of merely slowing it.durationandspeedcombine into a single transition duration, andrainbowsimply doubles it, so all five animations share one animation clock.