CSS Gradient Text Generator

Features

• Linear, radial and conic gradients
• 2 to 4 stops, each with an adjustable position
• An adjustable angle that drives both linear and conic
• A live text preview that redraws on every keystroke and colour change
• Both the standard and the -webkit- background-clip declaration
• Just start typing to preview; a placeholder shows when the box is empty
• The delivered code includes the @supports not fallback
• The delivered code includes the ::selection highlight fix
• Everything is computed in your browser; nothing is uploaded

How to use

1. Pick the gradient type and set the angle
2. Choose the endpoint colours with the pickers, ticking middle stops if needed
3. Type into the box and check the preview
4. Copy the CSS below; the prefix, the fallback and the selection fix are all in it

FAQ

Why has my gradient text vanished completely?

It is almost always a missing `background-clip: text`. The gradient shows through the letters only because the background is clipped to their shape; `color: transparent` merely makes the letters themselves transparent. With one of the two missing you either see no gradient or lose the text entirely. This tool emits both together, so code copied from here never has that half-configuration. The other possibility is a browser without clipping support, in which case use the `@supports not` fallback in the delivered code.

Why is the selection highlight invisible?

Because the text itself is transparent, and `::selection` only tints that transparency, so no highlight shows. The fix is to restore a visible fill in the selected state: the delivered `.gradient-text::selection` rule sets both `color` and `-webkit-text-fill-color`, the latter being the one WebKit actually reads.

Why the -webkit- prefix?

`background-clip: text` is still not a baseline feature everywhere, and Safari / WebKit only understands `-webkit-background-clip`. With the standard form alone the clipping is dropped in those browsers and the text is likely to become invisible. So both are written and each browser takes the one it needs.

Can gradient text be used for long paragraphs?

It is not advisable. Background clipping lays a gradient across the whole element and cuts it to the text, so over many lines the gradient stretches far and each line lands on a different part of the spectrum, which reads as noise; legibility also swings with whatever colour sits behind each line. It suits short text: headings, button labels, a logo. For a long paragraph, a solid colour, or the effect on a few key words, is the safer choice.