CSS Text Gradient Generator
Make a gradient fill for text by setting its angle and colour stops. The preview shows the heading with the gradient applied, and the output is the set of declarations that paints a gradient through the letters.
The gradient follows the W3C CSS Images Module Level 3 for linear-gradient(), and the text clip follows the background clipping rules. Nothing leaves your browser.
Gradient text
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;How to use it
- Set the angle. 90 degrees runs left to right, and 180 runs top to bottom.
- Choose the colours of the first and last stops. Add a third stop for a three-colour blend.
- Move the position sliders to control where each colour sits along the gradient.
- Copy the CSS block onto a heading or any element that holds text.
About the CSS behind it
A linear-gradient() is painted as a background. It has an angle and a list of colour stops, and the browser blends smoothly between the stops. The gradient function is defined in the W3C CSS Images Module Level 3. On its own, that background sits behind the text, so the gradient shows only as a coloured box.
background-clip: text changes where the background is painted. It stops the background at the edge of the glyphs, and the text colour is set to transparent so the glyphs show the background. The MDN article on background-clip describes the property and its browser support.
Gradient text suits headings and hero copy, where the colour is part of the brand. Keep body text a solid colour, because a gradient makes small letters harder to read.
Frequently asked questions
- Why does the gradient text need background-clip: text?
- A background is normally painted behind the element box. background-clip: text limits the background to the glyph shapes, so the gradient shows through the letters. The text colour is made transparent so the gradient is what you see.
- Do I still need the -webkit- prefixes?
- Keep them. background-clip: text is standard, but older Safari and Chromium releases only honour the -webkit-background-clip spelling, and -webkit-text-fill-color is what makes Safari hide the text colour. The generator writes both so the output works across browsers.
- Why does my gradient text disappear on some backgrounds?
- The text is only painted where the gradient is, so if the gradient colours are close to the page background, the text loses contrast. Check the gradient against the background, and avoid very light stops on white.
- Can the gradient text animate?
- Yes. Make the gradient wider than the element, using background-size, and move background-position in a keyframes animation. The CSS animation generator on this site produces the keyframes if you want to try it.
Related tools and components
- Box Shadow GeneratorShadows for the card behind the heading
- Text Shadow GeneratorShadows behind gradient text
- Tailwind Color Palette GeneratorPick stops from a full shade scale
- CSS Animation GeneratorAnimate the gradient position
- Badge componentShort labels with a gradient
- Button componentButtons with a brand gradient