CSS Gradient Text Generator

Using the CSS Gradient Text Generator

How gradient text works

CSS cannot colour text with a gradient directly, so the trick paints the gradient as the element's background, clips that background to the shape of the letters with background-clip: text, and makes the text itself transparent so the background shows through.

Always keep a fallback

If a browser does not support background clipping, transparent text would be invisible. The generated CSS sets a solid color first and only switches to transparent inside an @supports check, so the words are always readable.

Contrast across the whole word

A gradient has a different contrast at every point. Make sure even the lightest part of the gradient stands out from the background, especially for smaller sizes. Gradient text works best for short, large headlines.

Animating it

The animation option makes the gradient wider than the text and slides its position, so the colours flow through the letters. It is turned off for visitors who prefer reduced motion.

Choosing colours that read well

Pick gradient colours with similar lightness so no part of the word fades into the background. Blues into violets or teals stay legible on dark pages; very light yellows disappear on white. Test the headline at its smallest responsive size, because thin parts of letters lose contrast first.

Frequently asked questions