Gradient Text — `.mv-gradient-text`

Pure-CSS multi-color gradient text: static, animated back and forth, editorial fade, or an aurora of colored blobs drifting inside the letters.

Category	Animated text
Type	CSS only (`.mv-gradient-text`)
Status	stable
Keywords	gradient, aurora, heading, colorful, hero, background-clip

When to use

A hero headline or keyword needs multi-color emphasis without images
A title should draw attention with a moving gradient or aurora blobs drifting inside the letters
An editorial heading should fade out toward the bottom

Avoid when

Body text or small labels; gradients lower contrast and legibility at small sizes
A light sheen sweeping over muted text, such as a loading label, is wanted → use Shimmer Text instead
Text sits on a moving or unpredictable background and must stay readable → use Adaptive Ink instead

Install

node scripts/add.mjs gradient-text --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["gradient-text"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, components/gradient-text/gradient-text.css.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<div style="display:grid;gap:1.6rem;justify-items:center;text-align:center;max-width:44rem">
  <h2 style="margin:0;font:800 clamp(2rem,5vw,3.2rem)/1.05 var(--mv-font-sans);letter-spacing:-.04em">
    Interfaces that <span class="mv-gradient-text" data-animate>captivate</span>.
  </h2>

  <p style="margin:0;font:800 clamp(2.4rem,6vw,4rem)/1 var(--mv-font-sans);letter-spacing:-.05em">
    <span class="mv-gradient-text" data-variant="aurora">Imagine without limits</span>
  </p>

  <h3 class="mv-gradient-text" data-variant="fade" style="margin:0;font:700 clamp(1.5rem,3.5vw,2.2rem)/1.15 var(--mv-font-sans);letter-spacing:-.03em">
    The design system for your whole team
  </h3>

  <div style="display:flex;gap:2.5rem;flex-wrap:wrap;justify-content:center">
    <div>
      <div class="mv-gradient-text" data-animate data-glow style="--mv-gradient-text-colors:#22d3ee,#a78bfa,#f472b6;--mv-gradient-text-glow:#a78bfa;font:800 2.4rem/1 var(--mv-font-sans);letter-spacing:-.03em">+38%</div>
      <div style="font-size:.8rem;color:var(--mv-fg-muted);margin-top:.35rem">conversions</div>
    </div>
    <div>
      <div class="mv-gradient-text" data-animate="y" style="--mv-gradient-text-colors:var(--mv-success),var(--mv-info),var(--mv-success);font:800 2.4rem/1 var(--mv-font-sans);letter-spacing:-.03em">99.99%</div>
      <div style="font-size:.8rem;color:var(--mv-fg-muted);margin-top:.35rem">uptime</div>
    </div>
  </div>
</div>

API

Attributes

Name	Type	Description
`data-animate`	(empty) \| y \| hover	Animates the gradient horizontally, vertically, or only on hover.
`data-variant`	fade \| aurora	fade: a heading that fades out toward the bottom; aurora: blurry blobs in motion (--mv-gradient-text-c1…c4).
`data-glow`	boolean	Glowing halo around the letters.

CSS classes

Name	Description
`mv-gradient-text`	On a heading or a span. When text wraps, each line gets its own gradient.

CSS variables

Name	Default	Description
`--mv-gradient-text-colors`	`accent, pink, amber`	Comma-separated list of colors (stop positions accepted).
`--mv-gradient-text-angle`	`90deg`	Gradient angle.
`--mv-gradient-text-duration`	`6s (aurora: 10s)`	Duration of one pass.
`--mv-gradient-text-c1 … c4`	`accent, pink, warning, info`	Blob colors of the aurora variant.
`--mv-gradient-text-glow`	`var(--mv-accent)`	Halo color (data-glow).

Accessibility

Real text, selectable and read normally. Pick colors that contrast with the background: the lightest one determines legibility. Reduced motion: static gradient.