build69
Sign inGet API key
build69  /  Components  /  Motion — Text Animations  /  GradientText

GradientText

v1.0.1Updated 21 Jul 2026

Fills text with a continuously animated linear gradient that flows through the glyphs, driven by a moving 300% background-position. Takes two stops (from/to) or three (from/via/to) using any CSS colour, including build69 tokens like var(--b69-accent). It is the lightest member of the AnimatedText family — it has no motion/react dependency and no reduced-motion branch, since the animation is pure CSS.

View source← Back to catalog

Preview

Live · 3 stories
Gradient StandaloneOpen ↗
▸Why this is recommendedanimationtextgradientcolour+6

GradientText — standalone.

Recommended for+14
  • ✓Making one phrase of a hero headline pop in brand colours
  • ✓Highlighting a product name inside a marketing title
  • ✓Applying a brand accent sweep to a pricing page heading
  • ✓Drawing the eye to a key phrase in an announcement banner
Tags+6
animationtextgradientcolourbrandheadlinemotionmarketingherostandalone
Features+4
  • Animated linear-gradient fill that loops seamlessly (background wraps back to `from`)
  • Two-stop mode (from → to) via the MagicUI AnimatedGradientText primitive
  • Three-stop mode (from → via → to) rendered with a hand-rolled span
  • Accepts any CSS colour, including build69 tokens such as var(--b69-accent)
  • Pure CSS animation — no motion/react dependency
  • Renders inline-block, so it drops into a heading beside plain text
Not recommended for−2
  • ✕Body copy or long paragraphs
  • ✕Small text where bg-clip-text hurts contrast and legibility
  • ✕Any text that must meet a strict contrast ratio (the fill is transparent-clipped)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "GradientText" })

Usage

import { GradientText } from '@/components/motion/animated-text/gradient-text';

<h1 className="text-5xl font-semibold tracking-tight">
  The shop floor for{' '}
  <GradientText
    text="modern Thai businesses."
    from="var(--b69-accent)"
    via="var(--b69-warning)"
    to="var(--b69-info)"
  />
</h1>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
text

The text to fill with the gradient.

stringyes
from

Start colour; any CSS colour (default: 'var(--b69-accent)').

string—
to

End colour; any CSS colour (default: 'var(--b69-info)').

string—
via

Optional middle stop. When set, the gradient runs from → via → to using the 3-stop renderer.

string—
className

Classes merged onto the rendered span.

string—
style

Inline styles merged onto the span (after the gradient CSS variables).

CSSProperties—

Related

Platform docsAll componentsSource files