Skip to content
rdloom

Gradient Text

Text filled with a gradient that keeps flowing, for a short headline or a highlighted word. The words stay real text.

Motionv0.1.0experimentalWCAG 2.2 AAView spec

Optional, and kept apart.

Nothing here is included in a project unless you add it, and the plain component it builds on is unchanged. This effect is decoration: it is hidden from screen readers, stands still for visitors who prefer reduced motion, and can be paused. Use Still on a preview to see that version.

Build faster
import { GradientText } from "@rdloom/react";

export default function GradientTextBasicExample() {
  return (
    <GradientText className="text-3xl font-bold">Build faster</GradientText>
  );
}

Installation

npx rdloom add gradient-text

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

It also adds rdloom-motion.css next to your tokens and imports it from the tokens file, once: no setup, and no inline styles. The plain components you already use are untouched.

Use another registry client
npx shadcn@latest add https://rdloom.vimalbhatt.com/r/gradient-text.json

Works, but without upgrade tracking, and you import the motion CSS yourself.

Usage

import { GradientText } from "@rdloom/react";

<GradientText className="text-3xl font-bold">Build faster</GradientText>

Headline

Components you own, that keep improving

import { GradientText } from "@rdloom/react";

export default function GradientTextHeadlineExample() {
  return (
    <h3 className="max-w-md text-3xl leading-tight font-bold">
      Components you own, <GradientText duration={8}>that keep improving</GradientText>
    </h3>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

PropTypeDefault
childrenrequired

The text.

nodenone
colors

Colours of the gradient, any CSS colours. Two or more. Each should be readable on the page by itself.

readonly string[]none
duration

Seconds for the colours to flow once around.

number6
isPaused

Stops the animation. Moving content that lasts more than five seconds should be stoppable.

booleanfalse

Accessibility

Role text, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Not interactive.

Screen readers announce

  • Read as ordinary text

What your code must do

  • Decoration only: the animated layers are hidden from assistive technology and never take focus
  • Stands still for visitors who ask for less motion (prefers-reduced-motion), and the effect can also be shown still with the rdm-still class
  • The default colours each meet 4.5:1 against the page in light and dark; check your own
  • In forced-colors (high contrast) mode it is drawn in the system text colour with no effect
  • Does not flash: nothing changes more than three times in a second (WCAG 2.3.1)
  • Optional: it is a separate component, so projects that do not add it carry none of its code

Guidelines

Use it when

  • A headline or one emphasised word on a marketing page

Avoid it when

  • Body text
  • Interface labels

Don't

  • Gradients with a very light colour, which disappears on a light page

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

  • --rd-color-action-primary
  • --rd-color-feedback-warning
  • --rd-color-feedback-info