CSS Visual Directory
Gradient Text
A gradient clipped to the shape of the letters, so the text itself carries the colour.
Edit Gradient Text
Change any value to see it update live.
About this entry
What it is
A gradient clipped to the shape of the letters, so the text itself carries the colour.
Headlines and hero type where a flat colour would look ordinary.
Copy & use
How to copy and use gradient text
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Headlines and hero type where a flat colour would look ordinary.
- 03
Check the final result
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Value by value
What each part of this rule does
Paints a gradient on the element, clips it to the glyph shapes and then makes the text itself transparent so the gradient shows through.
linear-gradient(90deg, #f76d3c, #7f5af0)- The gradient, painted across the element's box.
-webkit-background-clip: text- Clips the painted background to the letter shapes.
color: transparent- Hides the actual text colour so the clipped background is visible.
Making it yours
How to adjust gradient text
The gradient spans the element, not the text, so a wide container makes it look almost flat. Wrap the words in a tighter inline element to get the full sweep across the letters.
Worth knowing before you ship it
Transparent text disappears entirely if the background fails to paint. Keep a solid colour fallback, and never apply it to text a reader must have.
Common questions
Using gradient text
What is gradient text?
A gradient clipped to the shape of the letters, so the text itself carries the colour. Headlines and hero type where a flat colour would look ordinary.
Where do I put the gradient text CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Headlines and hero type where a flat colour would look ordinary. Change one value at a time so you can see what each part contributes, and check the cascade in case a more specific rule already sets the same property.
Will gradient text work everywhere?
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Can I customise gradient text after copying?
Paste the declaration into the selector for the element you want to style. Adjust one value at a time and check the cascade so an existing rule does not unexpectedly override the effect.
Also known as
Keep browsing