The four lines, in order
background: linear-gradient(135deg, #F5A63D 0%, #A8340F 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
The gradient is painted as the element's background, the background is clipped to the glyphs, and the glyphs themselves are made transparent so the background shows through. Swap the order of the first two and it breaks — see the FAQ.
Which gradient kind
Linear is the usual choice for headings: a diagonal from one brand colour to another. Radial puts a glow in the middle of a word; conic gives a rainbow sweep. The kind selector above switches between them without touching the clip lines — those are the same in every case.
Where it goes wrong
- Whole box coloured — clip line before the background line. Reorder.
- Nothing visible in Safari — missing
-webkit-background-clip. - Text still black —
color: transparentmissing. - Gradient spans the row, not the word — the element is
display: block; make itinline-block.
For a plain background rather than text, the gradient generator shares this link format, so the colours carry across.
Computed on your device
The preview is your browser rendering the same CSS you copy. Nothing is uploaded.
Questions
Why does my gradient text show a solid box instead?+
Because `background` is a shorthand that resets `background-clip`. If the clip line comes before the background line, the background wins and paints the whole box. The order this tool outputs — background first, then the two clip lines, then transparent colour — is the one that works.
Do I still need the -webkit- prefix?+
For Safari, yes. Unprefixed `background-clip: text` is supported in Chrome and Firefox; Safari needs `-webkit-background-clip: text` and both are emitted so it works everywhere. Keep both.
The gradient is clipped to the text but the text is still the old colour.+
The text colour has to be transparent for the background to show through: `color: transparent`. Some guides use `-webkit-text-fill-color: transparent`; either works, and `color` is the standard one.
Can gradient text be selected and read by screen readers?+
Yes — it is real text, not an image. Selection highlight looks odd because the text is transparent, but copy, search and accessibility all work as normal. That is the whole reason to do it in CSS.
Does it work on a link or a button?+
On any inline or block text. Apply it to the element that contains only the text; if the element also has padding or a border, make it `display: inline-block` so the gradient spans the text and not the whole row.