Gradient Text Generator
Apply a gradient to text with background-clip. Live preview with your own words, size and weight. Copy CSS or Tailwind.
Colors
.gradient-text {
font-size: 84px;
font-weight: 800;
background-image: linear-gradient(120deg, #7c3aed, #db2777, #06b6d4);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}About the gradient text generator
Text cannot take a gradient directly, so the trick is to paint the gradient as the element's background, clip that background to the shape of the glyphs with background-clip: text, then make the text itself transparent so the background shows through.
It is three declarations that must all be present. Miss the transparent fill and you see solid text; miss the clip and you see a gradient rectangle. This generator always exports the complete set.
How to use it
- 1Type the heading you will actually ship, at the real size and weight.
- 2Set the angle, then pick the start and end colours.
- 3Turn on the middle colour for a three-stop blend, which usually looks richer.
- 4Copy the CSS or the Tailwind classes.
Worth knowing
- Gradient text is invisible to some high-contrast modes because the fill is transparent. Keep it for decorative headings, not body copy.
- Bold, large text carries a gradient far better than thin or small text.
Questions
Why is my gradient text invisible?
You have the transparent fill but not the clip, or the background is not set. All three of background-image, background-clip: text and a transparent text fill must be present.
Does this work in every browser?
Yes in all current browsers. The -webkit- prefixed versions are included in the export for older Safari.
Can I use gradient text on body copy?
You can, but you should not. It lowers contrast and some accessibility modes cannot override a transparent fill. Keep it for headings.