Color
Gradient Text Generator
Set the colours and angle to see a live preview, then copy the CSS with its fallback colour.
What this is
A gradient text generator assembles the CSS that fills letterforms with a gradient instead of a solid colour. It does not colour the text directly: the gradient is set as the element's background, that background is clipped to the shape of the letters, and the text colour is made transparent. Because the technique depends on two properties working together, omitting one makes the text vanish entirely — which is the failure people hit most.
How it works
Because the text colour is made transparent, the text becomes genuinely invisible if the background clip does not apply. The fallback colour is therefore not a nicety but a safety net: declare a solid colour first and the gradient properties after, so a browser without support still renders readable text.
Gradient text also lowers contrast unevenly — some letters can clear the contrast threshold while others fail, depending where they fall along the gradient. That makes the technique suitable for short headings and poor for body text. This tool reports the lowest contrast ratio across the gradient rather than the average, because the worst letter is what decides legibility.
How to use it
- Pick two or more colours Set a start and end colour, and add a middle colour if you want one.
- Set the angle and watch the preview The preview uses your own text, so you see the result on the words you will actually use.
- Copy the CSS The generated snippet already includes the fallback colour on its first line.
Common questions
- Why is my gradient text completely invisible?
- Because the text colour is transparent while the background-clip property is not taking effect, leaving nothing to paint. Make sure background-clip and its -webkit- prefixed form are both present, and always declare a solid fallback colour before the gradient properties.
- Is gradient text accessible?
- Only if the weakest point of the gradient still clears the contrast threshold, because legibility is set by the worst letter rather than the average. Keep it to short headings and avoid it for long body text, where readers spend the most time.
- Can gradient text still be selected and searched?
- Yes — the technique only changes how the text is painted, it does not replace it with an image. The text remains real text that can be copied, read by screen readers and indexed by search engines.
Notes
- The snippet is assembled in your browser and sent nowhere.