Gradient Text CSS Generator
Generate CSS for gradient text — a linear or radial gradient clipped to the glyphs via background-clip: text (with the -webkit- prefix) and a transparent fill. Copy the ready-made class or inline snippet.
Input
Shown in the preview and the HTML snippet. The CSS class is the same regardless of this text.
Direction of a linear gradient.
Output
Your gradient text will appear here.
Add this to your stylesheet, then apply class="gradient-text" to your element.
Inline-styled span — paste it anywhere, no stylesheet needed.
Guides
Gradient text turns flat headings into eye-catching typography by painting a color gradient directly onto the letters instead of a solid fill. This Gradient Text CSS Generator builds the exact CSS for you: pick your colors, direction, size and weight, watch the live preview update, then copy a ready-made class or a self-contained inline snippet.
How gradient text works
The effect relies on one clever combination of CSS properties. You set a gradient as the element's background-image, clip that background to the shape of the glyphs with background-clip: text, and then make the text fill transparent so the gradient shows through:
.gradient-text {
background-image: linear-gradient(90deg, #464aff 0%, #ff6b9d 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
display: inline-block;
}
The -webkit-background-clip and -webkit-text-fill-color lines are the key to broad browser support — Chrome, Safari and other WebKit/Blink browsers need the prefixed versions, and this generator always includes them so your text renders everywhere.
Using the generator
- Type your sample text to see it in the live preview.
- Choose a gradient type — linear for a straight sweep across the letters, or radial for a glow that spreads from the center.
- Set the angle (for linear gradients) to control the direction of the sweep, from
0deg(bottom-to-top) through90deg(left-to-right). - Add color stops. Two colors are enabled by default; tick "Add a third color stop" for a richer, multi-color blend. Each stop has a position from 0% to 100%.
- Adjust font size and weight to match the heading you're styling.
The tool outputs two things: a .gradient-text CSS class to drop into your stylesheet, and a self-contained HTML span with the styles inlined — handy for email templates, CMS blocks, or anywhere you can't add a stylesheet.
Why does my gradient text look cut off?
Because the background is clipped to the text, the element needs display: inline-block (or block) for the clip to size correctly — this generator adds it automatically. If a letter's descenders get trimmed, add a little line-height or padding to the element.
Is gradient text accessible?
Gradients can reduce contrast, so keep the darkest color in the blend readable against your background and reserve the effect for large headings rather than body copy. Screen readers read the underlying text normally, so there's no semantic downside.
Does this send my text anywhere?
No. The CSS is generated entirely in your browser — nothing is uploaded, and the tool works offline once the page has loaded.