About the CSS Gradient Text Generator
What is gradient text in CSS?
There's no property that fills letters with a gradient. What everyone actually does is a small trick. Paint a gradient as the element's background, tell the browser to clip that background to the shape of the text with background-clip: text, then make the text itself transparent so the background shows through the letterforms. Four declarations, and they have to be in the right combination or you get a colored box instead of colored text.
This tool writes those four for you and shows the result on real type. You can add as many color stops as you like, move each one along the gradient, switch between a linear sweep and a radial burst, and set the angle. Because the gradient is a background, its size follows the element, which is why a short word and a long heading with the same CSS can look quite different.
How to Use This Tool
- Pick a preset. Sunset, Ocean, Candy, Gold and Cyberpunk are ready to use. Slate is the quiet one.
- Set your stops. Each stop has a color and a position. Add a third and put it near the middle if you want the gradient to turn.
- Choose the shape. Linear sweeps in a straight line at whatever angle you set. Radial spreads out from the center.
- Type your real headline. Word length changes how the gradient lands, so judge it with the text you will actually use.
- Copy it. CSS, an SCSS mixin, a Tailwind class or a JS style object.
Common Use Cases
Gradient text is a display effect. It earns its keep at large sizes and gets in the way at small ones.
- Hero headlines: The most common use by far, usually two brand colors on a dark background.
- Highlighting one phrase: Wrap a single span so the gradient falls on the two or three words that matter rather than the whole line.
- Big numbers and stats: A gradient across a large figure reads as emphasis without adding another color to the page.
- Logo type: Live text instead of an image, which stays sharp at any size and can still be selected and read.
- Pricing and plan names: Marking the recommended tier with the same gradient used on its button.
Two that pair well with it, the CSS Text Shadow Generator for glow and outline effects, and the CSS Gradient Border Generator for the same colors around a box. To put the gradient behind the whole section instead of inside the letters, use the CSS Gradient Generator. Or browse all our free developer tools.
Frequently Asked Questions
Why does my gradient text show as a solid block?
Almost always one of two things. Either color: transparent is missing, so the normal text color is painted on top of the clipped background and hides it, or background-clip: text did not apply, so the gradient fills the whole box. Both lines are in the generated CSS. If you are overriding color somewhere later in your stylesheet, that override wins and you get solid text.
Do I still need the -webkit- prefix?
Yes, keep it. The unprefixed background-clip: text is supported in current browsers, but -webkit-background-clip: text is what older Safari and a long tail of mobile browsers understand, and it costs one line. This tool emits both, with the prefixed one first so the standard property wins where it is supported.
Is gradient text accessible?
The text stays real text, so screen readers, search engines and text selection all work normally, which is the main advantage over using an image. Contrast is the risk. A gradient means the contrast ratio changes across the word, so you'll want to check the lightest part of the gradient against your background, not the average. Keep it for large display text where the contrast requirement is lower, and never put it on body copy.
What happens in a browser that does not support it?
You get invisible text, because color: transparent applies but the clipping does not. That's the one genuinely dangerous failure mode here. The usual guard is to set a solid color first and only apply the transparent color inside an @supports (background-clip: text) block, so unsupporting browsers keep the solid color.
Why does the gradient look different on a longer heading?
Because the gradient is sized to the element, not to the letters. A two-word heading and a ten-word one stretch the same gradient across very different widths, so the colors land in different places. If you need it consistent, set an explicit background-size, or apply the effect to a span that hugs the words rather than a block that fills the row.
Can I animate the gradient?
Yes, and it's a common effect. Make the background wider than the element with background-size: 200% auto, then animate background-position from one side to the other. That shifts the colors through the letters without repainting the text itself. Wrap it in a prefers-reduced-motion query so people who have asked for less movement do not get a constantly shifting headline.
