CSS Gradient Text Generator
Gradient headline
.gradient-text {
background-image: linear-gradient(90deg, #0c6249, #2f8f6b, #c2711d);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}Give the element a fallback colour first
A browser that does not support background-clip: text renders transparent text on a transparent background, invisible. Set a plain color on the element before these rules, so the fallback is a solid colour rather than nothing.
Gradient text in CSS is a gradient background painted only where the letters are. This builds the rule live, with linear or radial gradients, two or three colour stops and an adjustable angle, and includes the fallback declaration that stops the text disappearing where the technique is unsupported.
How it works
There is no gradient colour property in CSS. The effect works by giving the element a gradient background image, clipping that background to the shape of the text with background-clip: text, then making the text itself transparent so the clipped background shows through.
- Set background-image to a linear or radial gradient.
- Set background-clip: text, with the -webkit- prefixed version alongside it. Safari and older Chrome still need the prefix.
- Set color: transparent so the text does not paint over the background.
- Add -webkit-text-fill-color: transparent, which takes precedence over color in WebKit browsers and is required for the effect there.
The order of the declarations matters for the fallback. Put a solid color on the element before these rules: a browser that does not support background-clip: text ignores the clip but still applies transparency, and the result is invisible text. A solid colour declared first means the worst case is text without a gradient, rather than no text at all.
The gradient is sized to the element, not to each letter, so the same rule on a wider heading spreads the colours further apart. That is usually what you want, and it is why a gradient tuned on desktop can look almost single-coloured on a narrow phone.
Examples
A two-stop horizontal gradient
Angle
90deg
Colours
#0c6249 to #c2711d
Result
background-image: linear-gradient(90deg, #0c6249, #c2711d)
At 90 degrees the gradient runs left to right. In CSS, 0deg points up and angles increase clockwise, which trips people up.
Adding a middle stop
Colours
Three stops
Result
linear-gradient(90deg, #0c6249, #2f8f6b, #c2711d)
Stops are distributed evenly when no positions are given, so the middle colour lands at 50%. Three stops give a smoother transition between two distant hues.
A radial gradient
Type
Radial
Result
radial-gradient(circle, …)
Radial spreads from the centre of the element outwards, so the middle letters take the first colour regardless of how many there are.
Frequently asked questions
Why is my gradient text invisible?
The clip is not being applied but the transparency is. Check that both background-clip: text and -webkit-background-clip: text are present, and that the element actually has a background image. Declaring a solid color before these rules makes the failure case readable text rather than nothing.
Is gradient text accessible?
Screen readers read it normally, since it is real text. Contrast is the risk: a gradient means the contrast ratio varies letter by letter, and the lightest stop must still meet the ratio against the background. Check the lightest colour in the gradient, not the average.
Does it work in every browser?
It works in all current browsers, with the -webkit- prefixed properties still needed for Safari. Internet Explorer never supported it. The unprefixed background-clip: text is now widely supported, but keeping both costs nothing.
Why does my gradient look different on mobile?
Because the gradient is sized to the element, not to the text. A heading that wraps to three lines on a phone spreads the same gradient over a taller, narrower box, so the colours land in different places. Test at the widths you actually ship.
Can I animate the gradient?
Not by transitioning the gradient itself, which browsers cannot interpolate. The usual approach is a background much wider than the element with an animated background-position, which slides the colours across the letters and does animate smoothly.