Gradient Text
Text filled with a slowly flowing ember gradient. CSS only.
- Category: Text
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Gradient Text
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | — | |
duration | number | 6 | |
as | ElementType | "span" |
About Gradient Text
Gradient Text fills words with a slowly flowing gradient in your accent colour. It draws the eye to one phrase in a headline without a single image.
Gradient Text is a text animation for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Gradient Text
- The key phrase in a hero headline.
- Logos and wordmarks.
- Pricing plan names.
- Section highlights.
How it works
It is background-clip text with an animated background position, pure CSS. It stays crisp at any size and pauses with reduced motion.
The real text stays in the page for screen readers and search engines; the animated letters are decorative copies marked aria-hidden. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Gradient Text
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change text, duration live, and the Code tab updates to match, so the snippet you copy already carries your values.
- colors (string[]).
- duration (number, default 6).
- as (ElementType, default "span").
Goes well with Gradient Text
These text pieces share its tokens and motion language, so they sit together on one page without clashing.
- Text Reveal: A React text reveal: words rise out of a blur one after another as they scroll in
- Shimmer Text: React shimmer text: a band of light sweeps across, for loading and thinking states
- Typewriter: A React typewriter effect with a human rhythm that types, holds and deletes words
- Scramble Text: React scramble text: characters cycle through glyphs before locking in
- Rotating Text: React rotating text that rolls between words letter by letter and resizes smoothly
Install Gradient Text
npx shadcn@latest add https://charcoalui.com/r/gradient-text.jsonGradient Text is free and MIT licensed. The command copies gradient-text.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Orbit Text, a Pro piece: Text lit by washes of colour that circle through the letters out of phase. CSS only.
Frequently asked questions
- Can I use my brand colours in gradient text?
- Yes. It uses your accent token by default, so changing the accent in your theme changes the gradient everywhere.
- How do I install Gradient Text?
- Run npx shadcn@latest add https://charcoalui.com/r/gradient-text.json. The shadcn CLI copies gradient-text.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Gradient Text free for commercial use?
- Yes. Gradient Text is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Gradient Text work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Gradient Text?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Gradient Text's props and source and get_install_command returns the exact command.