Gradient text generator
Type your text, choose the colors and angle, and see the gradient text at once. Copy the CSS and apply it to any heading or span.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Type the preview text.
- Set the angle and add up to five color stops.
- Adjust size and weight to see how it looks. Size and weight are only for the preview.
- Copy the CSS and add it to your own element’s rule.
What the output means
background-image: linear-gradient(90deg, #ff7a18 0%, #af002d 50%, #319197 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
The first line paints the gradient. The next two clip it to the letters and the last two make the letters themselves invisible so the gradient shows.
Example
A heading with an orange-to-red-to-teal gradient at 90° runs left to right across the whole text box.
Tips
- Heavy font weights show more of the gradient than thin ones.
- Pick colors that stay readable on your background at both ends.
- Fall back to a solid colour for forced-colors modes by keeping a plain
color in the cascade for those users.
Frequently asked questions
How does gradient text work in CSS?
The gradient is set as the element's background, background-clip: text cuts the background to the shape of the letters, and the text color is made transparent so the background shows through.
Why are there -webkit- lines?
Browsers support background-clip: text without a prefix now, but the -webkit- versions are kept for older WebKit and Blink browsers. -webkit-text-fill-color makes the glyph fill transparent.
Does gradient text work on a link or a button?
Yes, on any inline or block element with text. For a multi-line paragraph the gradient spans the whole box, not each line, unless you use display: inline-block.
Is gradient text accessible?
Contrast changes along the text. Check the lightest and darkest ends against your page background with the contrast checker, and avoid it for long passages.
What if the gradient is not shown?
Make sure the element has a width or is display: inline-block or block, and that no later rule sets a solid color after the transparent one.