OneTaskBy Tim King · Updated
Gradient Text Generator
Fill Headline Text With Linear, Radial or Conic Gradients Using background-clip
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Gradient Text Generator works
A gradient text generator fills the letters of a headline with a colour gradient instead of one flat colour. Pick a linear, radial or conic gradient, choose two or three colours, add a slow colour shift if you want movement, and copy CSS that falls back to a solid colour.
CSS cannot set a gradient as the color of text, so gradient text uses a different trick. The
gradient is painted as the element's background, then background-clip: text cuts the
background to the shape of the glyphs, and -webkit-text-fill-color: transparent makes the letters
themselves see-through so the gradient shows through them.
How the gradient text generator writes the CSS
The rule sets color to your first colour before anything else. If a browser cannot clip
backgrounds to text, it ignores the clip and fill lines and shows the headline in that solid
colour, which is readable, instead of a coloured box with invisible text. Both the prefixed
-webkit-background-clip and the standard property are written, because Safari and older Chromium
still need the prefix.
Linear, radial and conic
A linear gradient runs across the text at the angle you set, and 90 degrees gives the familiar left-to-right blend. Radial spreads out from the centre, which suits short words. Conic sweeps around a point, so it gives sharper colour changes between letters.
Shifting colours
The Shift option makes the gradient twice as wide as the text, repeats the first colour at the end so the loop is seamless, and slides the background along. Keep it slow, six seconds or more, and it reads as a gentle shimmer; visitors who ask for reduced motion get the still version.
FAQ
Why is my gradient text showing as a solid block of colour?
The background is painting but not being clipped. Check that background-clip: text and its
-webkit- twin come after the background shorthand, because the shorthand resets the clip. The
generated rule already has them in the right order.
Can I select and copy gradient text?
Yes. It is still real text in the page, so it can be selected, copied, found with the browser's
search and read by screen readers. The highlight colour may look odd because the text fill is
transparent, which you can fix with a ::selection rule.
Does gradient text meet contrast guidelines?
Contrast is checked for every part of the text, so the lightest point of the gradient must still reach 3:1 against the background for large headings. Test both end colours in a contrast checker before you ship it.
Can I use gradient text on a whole paragraph?
You can, but it is hard to read at body size and each line gets a different slice of the gradient. Keep it for headlines, numbers and short labels where the effect has room to show.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Gradient Maker
Linear, radial and conic CSS gradients with live preview.
CSS Text Shadow Generator
Visual text-shadow builder with drop, long, neon and outline presets.
Mesh Gradient Generator
Pure-CSS mesh gradients from stacked radial layers.
Text Animation
Animate a headline letter by letter and copy the CSS.
Fluid Typography Generator
A full fluid type scale of clamp() custom properties with a live specimen.