CSS Text Gradient Generator

This tool generates the CSS to fill text with a smooth colour gradient instead of a flat colour. Pick a start colour, an end colour and an angle, and preview the result live before copying the CSS. It is a popular effect for headings and hero text, and this generator handles the slightly fiddly technique for you.

How it works

Gradient text relies on the background-clip: text technique: you apply a linear gradient as the element’s background, clip that background to the shape of the text, then make the text colour transparent so the gradient shows through the letterforms. The tool builds the linear-gradient(angle, from, to) from your inputs and outputs all four required declarations, including the -webkit- prefix for broad browser support.

The four CSS declarations you need

background: linear-gradient(90deg, #6366f1, #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;

Every declaration is necessary:

1. background — sets the gradient behind the element. Without this there is nothing to show through the text.
2. -webkit-background-clip: text — clips the background to the text shapes in WebKit/Blink engines (Chrome, Edge, Safari). This is still required even in 2024 because the unprefixed property was only widely adopted later.
3. background-clip: text — the standard, unprefixed version for Firefox and forward-compatibility.
4. color: transparent — makes the text colour invisible so the background gradient shows through. Omit this and the text shows in its normal colour on top of the gradient, hiding it entirely.

Angle reference

Common pitfalls

Gradient disappears completely. Usually means color: transparent is set but the -webkit-background-clip prefix is missing. In WebKit browsers, without the prefix the background is not clipped, so the transparent text just shows nothing.

Works in Chrome but not Firefox (or vice versa). Including both the prefixed and unprefixed background-clip declarations is essential for cross-browser compatibility. This tool outputs both.

Gradient not visible on a coloured page background. The gradient only shows within the text shapes. On a dark background, check that your gradient colours are light enough to be legible; on a white background, avoid pale gradients that disappear into the page.

Effect applied to an inline element. background-clip: text requires the element to establish its own background context. If applied to an inline <span> inside another element, add display: inline-block to ensure the background renders correctly.

Everything runs in your browser — nothing is uploaded.