CSS Gradient Text Generator

How gradient text works in CSS

Gradient text is text whose letters are filled with a colour gradient instead of a single flat colour. The effect is everywhere in modern headings, hero sections and logos because it adds depth and energy to type without needing an image.

The technique is a small, clever combination of three properties. You set a gradient as the element's background, then use background-clip: text to clip that background to the shape of the letters, and finally make the text colour transparent so the gradient shows through. In code:

background: linear-gradient(90deg, #f54927, #4aa8ff); background-clip: text; -webkit-background-clip: text; color: transparent;

Browser support and the -webkit- prefix

This works in every modern browser, but it still needs the -webkit-background-clip: text prefix alongside the standard background-clip: text — so the generator always includes both. It also sets -webkit-text-fill-color: transparent, which is the most reliable way to make the underlying text disappear and let the gradient through across browsers. You don't have to remember any of this; the copied CSS has it all.

Use it well — accessibility and fallbacks

Gradient text shines on headings and display type, not body copy — thin or small text with a gradient can become hard to read. Because the real text colour is transparent, always think about the fallback: if a browser ever fails to apply the clip, the letters could vanish, so pick gradient colours that contrast with the background and consider setting a solid color first as a safety net. And as with any coloured text, check contrast against the background at both ends of the gradient.

Picking colours that look good

Two colours that are close on the colour wheel (like orange to pink, or blue to teal) give a smooth, premium feel; colours far apart give a bolder, more playful look. Add a third stop for a richer multi-colour sweep. Build or fine-tune the individual colours in the colour picker, or grab a palette from a photo with the image picker, then paste the hex codes here.

Using the result

Copy the generated CSS and apply the class to any heading or span. Want a gradient background instead of gradient text? Use the gradient generator for linear and radial backgrounds, or the mesh gradient generator for soft, organic multi-colour backdrops.

Frequently asked questions

How do you make gradient text in CSS?

Apply a gradient as the element's background, then use background-clip: text with a transparent text colour so the gradient shows through the letters. This tool generates the full CSS with a live preview.

Does gradient text work in all browsers?

Yes, in all modern browsers. It needs the -webkit-background-clip: text prefix alongside the standard property, which the generator includes automatically.

Is gradient text accessible?

Use it for headings and display text, not body copy, and keep the gradient colours contrasting against the background. Since the text colour is transparent, provide a sensible fallback colour.

Can I use more than two colours?

Yes — add as many colour stops as you like. Three stops give a rich multi-colour sweep; two give a clean, smooth blend.

What is the difference between gradient text and a gradient background?

Gradient text fills the letters themselves with a gradient, while a gradient background colours the surface behind content. For backgrounds, use the gradient or mesh gradient generators.