ffee
All tools
Gradient Text Generator
Build a background-clip text gradient with several stops and copy the finished CSS.
Build a text gradient
Gradient text
How to use the Gradient Text Generator
- Choose two or three gradient stops and set the gradient angle.
- Pick a fallback colour that stays readable on its own.
- Watch the preview and copy the finished CSS rule.
Features
- Two or three colour stops with a live preview
- Any angle from zero to three hundred and sixty degrees
- Fallback colour for browsers without clip support
- Copyable CSS with both standard and prefixed properties
Advertisement
Frequently Asked Questions
Common questions about the free online gradient text generator.
The text is painted with the background gradient and then clipped to the letter shapes, so
the fill follows the gradient instead of a flat colour.
If a browser ignores background-clip, the text would otherwise be invisible. The fallback
keeps it readable in every case.
The rule sets color, background-image, both clipped background properties and both text-fill
properties, so it works across engines.
This generator writes two or three, but the gradient syntax accepts any number. Add extra
colours after the last comma by hand.
Zero degrees points up and ninety degrees points right, so the colour order runs along that
direction across the element.
Yes. Apply the class to any element with text. For links, keep the underline or add a hover
colour so the text stays clearly interactive.
Check that background-clip is set to text and that the fallback colour is not the same as the
page background.
It works in all current browsers. The generated rule adds the webkit prefix so older Safari
versions render the gradient as well.
Yes. The preview element receives exactly the declarations that are copied, so what you see
in the box is the code you get.
Last updated: October 10, 2026