Design gradient text visually: drag color stops, set the angle or switch to radial and conic gradients, and preview on your own words and font. Copy clean CSS that uses background-clip: text with a solid-color fallback, plus HTML or Tailwind classes.
Last updated:
Presets
Gradient Text
Color stops
Gradient
Advertisement
Advertisement
How to use the CSS Text Gradient Generator
Pick a preset such as Sunset, Ocean or Rainbow, or press Random.
Edit the color stops: drag a handle along the bar, click the bar to add a stop, or change the color and position in the list.
Set the direction with the angle slider, or switch the type to radial or conic.
Type your text and choose font, size, weight and background to match your site.
Copy the CSS (or HTML / Tailwind) and add the class to your heading.
How CSS gradient text works
CSS cannot fill text with a gradient directly, because color only accepts a single color. The trick is to paint the gradient as the element's background, then clip that background to the glyph shapes and make the glyphs themselves transparent:
Property
Why it is needed
background-image: linear-gradient(…)
Paints the gradient behind the text
-webkit-background-clip: text
Clips the background to the letters in Safari and older Chromium browsers
background-clip: text
Standard, unprefixed version (Firefox, Chrome 120+)
-webkit-text-fill-color: transparent
Makes the letter fill see-through so the clipped background shows
color (fallback)
A solid color used where clipping is not supported, so the text never disappears
Linear, radial and conic gradient text
Linear gradients run along an angle: 90deg goes left to right, 180deg top to bottom, 0deg bottom to top. This is the classic choice for headings.
Radial gradients start in the center of the text box and spread outwards, which gives a glowing center on short words.
Conic gradients sweep around the center like a color wheel; repeat the first color at 100% for a seamless loop.
Tips for good-looking gradient text
Use heavy weights (700–900) and large sizes: thin strokes show very little of the gradient.
Gradients clip to the element's box, so on a full-width heading the colors spread over the whole line. Use display: inline-block to fit the gradient to the words.
Keep enough contrast at both ends: the tool shows the lowest contrast ratio between any stop and the background. WCAG asks for 3:1 for large text and 4.5:1 for normal text.
Descenders such as g and y can be clipped on tight line heights; add a little padding-bottom if letters look cut.
Frequently asked questions
How do you make gradient text in CSS?
Give the text a gradient background-image, clip that background to the shape of the letters with background-clip: text (plus -webkit-background-clip: text for Safari and older Chrome), and make the letter fill transparent with -webkit-text-fill-color: transparent or color: transparent. The gradient then shows only through the glyphs.
Why do I need the -webkit- prefix?
Chrome, Edge and Opera only support the unprefixed background-clip: text since version 120, and Safari still needs -webkit-background-clip: text. Including both lines covers every current browser.
What is the fallback color for?
If a browser cannot clip backgrounds to text, a transparent text color would make the text invisible. The generated CSS sets a normal solid color first and only switches to the gradient inside @supports, so older browsers and some email or print contexts still show readable text.
Can I animate a gradient text?
Yes. Make the background larger than the element (for example background-size: 200% auto) and animate background-position with @keyframes. Turn on Animate to get the code; it respects prefers-reduced-motion so users who disable motion see a still gradient.
Does gradient text work with selection and accessibility?
Screen readers read the text normally because only the paint changes. Check contrast at both ends of the gradient against the background, since light stops on a light page can be hard to read. Selected text may look different because the fill is transparent.
Why does my gradient look cut off on multi-line text?
By default the background covers the whole element, so each line shows only part of the gradient. Add box-decoration-break: clone (with the -webkit- prefix) on an inline element to repeat the gradient on every line, or keep gradient text to short headings.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.