How to Make Gradient Text in CSS (background-clip: text)

The short answer

CSS has no "gradient colour" for text, so the trick is to paint a gradient as the element's background, clip that background to the shape of the letters, and make the letters themselves transparent. You need four declarations: the gradient as background, then -webkit-background-clip: text;, background-clip: text; and color: transparent;. Build the gradient in the CSS Gradient Generator, copy it, and add the other three lines after it.

The four lines explained

Here is a complete rule for a heading with the class gradient-title:

.gradient-title { background: linear-gradient(135deg, #4f6ef7 0%, #7c3aed 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

What each part does:

Declaration	Purpose
background: linear-gradient(...)	Paints the gradient behind the element
-webkit-background-clip: text	Clips the background to the text shape (prefixed form, for older browser versions)
background-clip: text	The standard, unprefixed form of the same thing
color: transparent	Makes the letter fill see-through so the clipped gradient shows

Unprefixed background-clip: text now works in current versions of the major browsers. Keeping the -webkit- line as well costs nothing and covers older versions still in use.

Order matters

background is a shorthand that resets background-clip to its default. If you write the clip lines first and background after them, the clip is undone and you get a coloured box with invisible text. Always put the gradient first and the clip lines after it. Alternatively, use background-image instead of background, which does not reset the clip.

Step by step with the gradient generator

Open the CSS Gradient Generator.

Choose Linear, Radial or Conic. For text, linear usually reads best.

Set the Angle with the slider (0 to 360 degrees). 90 degrees runs left to right, 180 runs top to bottom, and 135 is a diagonal.

Pick colours in the Color stops list. Use + Add stop for a third colour, drag each stop's slider to set its position (0 to 100%), and click × to remove a stop. At least two stops are always kept.

Or click a Preset such as Sunset, Ocean or Dusk to start from a ready gradient.

Press Copy CSS. You get one line in the form background: linear-gradient(...);.

Paste it into your rule, then add the three lines from the short answer after it.

The generator lists stops in the order you add them. If you add a stop at 50% after a stop at 100%, move it in your CSS so positions run from low to high, which makes the result easier to read and edit.

Making it look right

Use a bold, large font

Gradients need area to show. On thin or small text, the colour change is hard to see and the text can look muddy. Gradient text works best on headings with a heavy weight (for example font-weight: 800;) and a large size.

Keep the gradient to the text width

A block-level heading such as h1 stretches to the full width of its container, and so does its background. On a wide screen, a short heading then shows only the first part of the gradient. Two fixes:

• Add display: inline-block; so the element is only as wide as its text.
• Or add width: fit-content; to keep it a block but shrink its width.

Check contrast at both ends

Each part of the text must be readable on the page background. A gradient from dark blue to pale yellow may pass at one end and fail at the other on a white page. Check the lightest and darkest stop separately against your background. The Web Content Accessibility Guidelines (WCAG) level AA asks for at least 4.5:1 for normal text and 3:1 for large text.

Troubleshooting

The text is invisible

• Clip lines before the shorthand. Move background: above the clip lines, as explained above.
• A typo in the gradient. If the gradient value is invalid, the browser ignores it, leaving a transparent background clipped to transparent text. Paste the gradient on its own into a test element to confirm it renders.

I see a coloured box behind the text

The clip is not being applied. Check that you have both -webkit-background-clip: text; and background-clip: text;, spelled exactly, and that a later rule is not overriding background.

Selected or highlighted text looks odd

Because the fill is transparent, some browsers show a plain selection colour. If this bothers you, set a selection style with the ::selection selector, giving it a solid color and background.

Fallback for very old browsers

If you must support browsers that cannot clip backgrounds to text, give the element a solid color first and wrap the gradient rules in a feature query: @supports (background-clip: text) or (-webkit-background-clip: text) { ... }. Browsers that do not understand it keep the solid colour.

Variations

• Animated gradient text. Make the gradient larger than the element with background-size: 200% auto;, then animate background-position with a keyframe animation. Keep motion subtle and respect users who prefer reduced motion with the prefers-reduced-motion media query.
• Hard colour bands. Put two stops at the same position, such as #4f6ef7 50%, #7c3aed 50%, for a sharp split instead of a blend.
• Radial glow. A radial gradient with a bright centre and darker edges gives a lit-from-within look on large display text.

Accessibility notes

• Screen readers read the text normally, because the content is still real text, not an image.
• Do not use gradient text for body copy or long paragraphs. It is harder to read than a solid colour.
• In Windows high-contrast mode and similar forced-colour settings, backgrounds can be removed. Test that your heading is still visible there, or provide a fallback colour.

Related tools and guides

To understand the difference between linear, radial and conic gradients, read CSS Gradients Explained: Linear, Radial and Conic. For picking harmonious colours to put in the gradient, try the Color Palette Generator, and to convert colour codes between HEX, RGB and HSL use the Color Picker.