CSS Gradient Text Generator
How gradient text works
Gradient text works by painting a gradient as the element's background, then clipping that background to the shape of the glyphs and making the text itself transparent. It is three declarations that only make sense together, which is why it is so often copied wrongly.
Syntax
background-image: <gradient>; background-clip: text; color: transparent;| Part | What it controls |
|---|---|
| background-image | The gradient that will become the letters. It fills the element's box, so a wide element spreads the gradient across more text. |
| background-clip: text | Clips the background to the glyph outlines. Safari and older Chrome need -webkit-background-clip: text as well. |
| color: transparent | Lets the clipped background show through. -webkit-text-fill-color: transparent is the more reliable form in Safari. |
| background-size + animation | Make the gradient wider than the text and animate background-position for a shimmer that sweeps across the letters. |
| display matters | The element needs to be block or inline-block. On a plain inline element the background box is the line box and the gradient breaks across lines. |
Notes from practice
Selection and accessibility still work
The text is real text: it is selectable, searchable and read correctly by screen readers. Only its paint is replaced, unlike an image of a headline.
Contrast is your responsibility
A gradient means the contrast ratio changes along the word. Check the lightest end against the background, not the average, or the last few letters will fail.
Keep it for display sizes
At body-copy sizes the gradient has too few pixels per glyph to read as a gradient, and the reduced contrast just makes the text harder to read.
CSS Gradient Text Generator FAQ
How do I make gradient text in CSS?
Set a gradient as the background, clip it to the text, and make the text transparent: background-image: linear-gradient(90deg, #2b5fe8, #18c5b0); background-clip: text; color: transparent. Add -webkit-background-clip: text for Safari.
Why is my gradient text showing as a solid block?
The colour is not transparent, so the text is painting over the clipped background. Set color: transparent, or -webkit-text-fill-color: transparent, which takes priority in WebKit browsers.
Does background-clip: text need the -webkit- prefix?
The unprefixed property is supported in current browsers, but Safari and older Chrome still need -webkit-background-clip: text. Write both; this generator includes the prefix in its output.
Is gradient text accessible?
The text stays real, selectable and readable by assistive technology. The risk is contrast: the ratio varies across the word, so check the lightest part of the gradient against the background rather than an average.
How do I animate gradient text?
Make the background wider than the element with background-size: 200% auto, then animate background-position from one end to the other. The gradient sweeps across the letters, which is the standard shimmer effect.
Related generators
- Gradients — Linear, radial and conic gradients, repeating patterns and modern colour-space interpolation.
- Typography — Size, spacing, decoration, text-wrap and text-stroke for any text block.
- Text Shadow — Layer text shadows for long shadows, embossed letterpress or neon glow.
- Animated Gradient (@property) — Register a custom angle with @property so the browser can animate a conic gradient, for spinning borders and fills.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.