--- title: "Text Gradient" description: "Text with animated gradient effects and various animation styles." canonical_url: "https://nuxt-motion-block.pages.dev/components/text/text-gradient" --- # Text Gradient > Text with animated gradient effects and various animation styles. 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
## 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`.
### Gradient directions `direction` switches the gradient axis and `colors` sets the stops. Use `radial` for a circular wash rather than a linear sweep.
### 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.
### 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.
## Customize
## Props Text to display with gradient. HTML element to render as. Array of colors for the gradient. Direction of the gradient. Animation type for the gradient. `static` paints the gradient with no motion. Animation duration in seconds, divided by `speed` to get the loop time. Animation speed multiplier. Higher is faster. Size of the gradient background as a percentage. CSS classes to apply to the text. Enable hover effect, scaling the gradient up while hovered. Accessibility label for the text. Defaults to `Animated gradient text: ` when empty. Hide the text from screen readers with `aria-hidden`. Reduce motion for accessibility. Per-slot classes merged over the theme defaults. See [UI](#ui). ## Slots 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](https://nuxt-motion-block.pages.dev/getting-started/theming), or app-wide under `ui.textGradient` in `app.config.ts`. Per-slot classes merged over the theme defaults. `text-gradient bg-clip-text text-transparent font-bold` `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: `, 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-image` clipped to the text, so the fill costs no extra DOM nodes — the glyphs are painted once. - Animation runs through `motion-v` variants on `background-position` and `background-size`; the visual update is a paint on the text box rather than a layout reflow. - `prefers-reduced-motion` and `reduceMotion` both return an empty transition, which stops the loop instead of merely slowing it. - `duration` and `speed` combine into a single transition duration, and `rainbow` simply doubles it, so all five animations share one animation clock. ## Sitemap See the full [sitemap](https://nuxt-motion-block.pages.dev/sitemap.md) for all pages.