Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Text

Free

Gradient Text for React

Text filled with a gradient that keeps flowing through its letters. For React with Base UI, when one word in a headline should catch the eye.

Framework

Gradient Text fills a word with colour that keeps moving: a gradient flows through the letters and loops without a seam, since it mirrors its colours back to where it started. A soft glow of the same colours can sit behind it.

Use it for one word in a headline or a short label, not a paragraph: the eye goes to it first. For light that sweeps across the letters instead, use Shimmering Text; for metal, Chrome Text. It's CSS only: the gradient is clipped to the letters and moved by a keyframe animation the install adds to your stylesheet, with no animation library. With reduced motion the gradient holds still.

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import { GradientText } from "@/components/ui/gradient-text";
<h2>
  Ship it <GradientText text="beautifully" />
</h2>

Demos

Colors

colors takes any CSS colours, start to end, including your theme's variables such as var(--primary). The gradient runs through them and back, so the loop has no seam whatever you pass.

Preview width

Glow

glow adds a blurred copy of the gradient behind the letters, moving with it, for a word on a dark hero.

Preview width

Duration

duration is one pass of the gradient through the text, 3000 ms by default; animate={false} holds it still, for a gradient that never moves.

Preview width

Accessibility

The text stays real text, read by screen readers and selectable; the glow is a decorative copy they skip. In forced-colors mode, where backgrounds are removed, the text falls back to the system's text colour so it never disappears. Check the contrast of your lightest colour against the page.

FAQ

Why is there no jump when the gradient loops?

The gradient runs through your colours and back, so its end is its start, and it's twice the text's width: the animation slides it exactly one width and starts over where it began.

Can it follow my theme?

Yes. Pass theme variables in colors, such as ["var(--primary)", "var(--foreground)"], and the text follows the theme, light and dark.

Does a constant animation cost much?

Little. It moves the background inside the letters, with no JavaScript and no layout; keep it to a word or a short line rather than a paragraph.

Which way does it flow?

The way the text reads: left to right in English, right to left in Arabic or Hebrew, whatever the page's direction.

Is gradient text readable enough?

Choose colours that each contrast with the page: the text is only as readable as its lightest colour. Keep gradient text for headlines and short labels.

What happens with reduced motion?

The gradient stops where it is and the colours stay; the text is unchanged.

API Reference

GradientText

<span> data-slot="gradient-text"

PropType
textstring

The text.

animate?boolean

Whether the gradient keeps flowing; false holds it still. @default true.

Default
true
colors?string[]

The colours the text runs through, any CSS colours, start to end; the gradient mirrors them so the loop has no seam. By default blue, purple and pink.

Default
DEFAULT_COLORS
duration?number

One pass of the gradient through the text, in milliseconds.

Default
3000
glow?boolean

A soft glow of the same colours behind the text. @default false.

Default
false
render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string

Merged with the part's classes.

CSS variableType
--gradient-text-durationstring

One pass of the gradient (3s).

All 97 text effects