Gradient text
Also called text gradient, gradient heading, or background-clip text
Text filled with a color gradient instead of a solid color, made by painting a gradient background and clipping it to the shape of the letters.
export function HeroHeadline() {
return (
<h1 className='text-5xl font-bold tracking-tight'>
Build apps{' '}
{/*
Inline span: the gradient spans the element box, so it fits the words.
text-blue-600 is the fallback where background-clip: text is missing.
Check contrast at the lighter end (teal-600) against the background.
*/}
<span className='bg-linear-to-r from-blue-600 to-teal-600 bg-clip-text text-blue-600 supports-[background-clip:text]:text-transparent'>
people love
</span>
</h1>
);
}Make the words "people love" in the hero headline gradient text: a 90-degree linear gradient from #2563eb to #0d9488, clipped with background-clip: text and a transparent text color, applied to an inline span so the gradient fits the words. Keep a solid blue fallback color, and check that the lighter end still has at least 3:1 contrast against the background.
Paste into Layerwise or any AI coding tool.
What is Gradient text?
Gradient text paints a gradient as the element background, clips that background to the letters with background-clip: text, and makes the text color transparent so the gradient shows through. The result is a heading that shifts from one color to another across its letters.
Use it to make a key phrase or headline stand out, often in brand colors. One gradient phrase per screen is usually enough, and it does not belong on body text, where it hurts readability.
The gradient spans the whole element box, so put it on an inline element or one sized to its text, or a short word in a wide block shows only part of the colors. Check contrast at the lightest end of the gradient, which decides how readable the text is. In Tailwind, combine a gradient such as bg-linear-to-r with bg-clip-text and text-transparent.
Often confused with
- Shimmer text
- Shimmer text sweeps a moving band of light across a label to show work in progress. Gradient text is a color blend used for emphasis, usually standing still.
Related terms
All termsShimmer text
Text with a band of light sweeping across it on a loop, often used for "Thinking…" and other status labels while an app is working.
Mesh gradient
A smooth, multicolor gradient where several colors blend outward from different points, like paint mixing, often used for hero backgrounds.
Color contrast
How much text stands out from its background, measured as a ratio from 1:1 to 21:1 and checked against the WCAG levels AA and AAA.
Accent color
The one highlight color an interface uses for actions and selected states, and the CSS property that tints native form controls.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.