The CSS Text Gradient Generator makes text filled with a gradient — the eye-catching effect you see on headings and hero titles. Choose your colors and angle, watch the sample text update live, and copy the CSS or Tailwind code.
Gradient text works by painting a gradient background behind the text and then clipping it to the shape of the letters, so the gradient shows through. This tool writes that code for you, including the vendor-prefixed properties needed for wide browser support.
How to create gradient text
- Choose Linear, Radial, or Conic and set the angle.
- Pick your colors and stop positions, or start from a preset.
- Check the live gradient-text preview.
- Copy the CSS or the Tailwind classes.
How gradient text works
The trick is to set the gradient as the element’s background, then use background-clip: text (with the -webkit- prefix) and a transparent text color so the background is only visible through the letters. In Tailwind the same effect is bg-[linear-gradient(...)] combined with bg-clip-text and text-transparent.
Frequently Asked Questions
How do I make gradient text in CSS?
Apply a gradient as the background, then add background-clip: text (and -webkit-background-clip: text) with a transparent text color. This tool generates that exact CSS for you.
How do I do gradient text in Tailwind?
Combine the gradient background with bg-clip-text and text-transparent — for example: bg-[linear-gradient(...)] bg-clip-text text-transparent. The tool outputs this ready to copy.
Why is my gradient text invisible?
Gradient text needs a transparent text color so the background shows through. If the text disappears entirely, make sure a background/gradient is set and that you included the -webkit-background-clip: text prefix for Safari and Chrome.
Does gradient text work in all browsers?
It works in all modern browsers. The generated CSS includes the -webkit- prefixes required by Chrome, Safari, and Edge.
Is the text gradient generator free?
Yes — it is free, needs no sign-up, and runs entirely in your browser.