How does gradient text work in CSS?

You apply a linear-gradient as the element background, set background-clip: text, then make the text colour transparent so the gradient shows through the letter shapes.

Do I need the -webkit- prefix?

Yes, for the widest support include both -webkit-background-clip: text and the unprefixed background-clip: text. This tool outputs both.

Why does my gradient text disappear?

It usually means color: transparent is applied without background-clip: text taking effect — for example the -webkit- prefix is missing in a WebKit browser. Include both -webkit-background-clip: text and background-clip: text so the gradient is clipped to the letters instead of the text vanishing.

What does the angle control?

The angle sets the direction of the linear gradient. 90deg runs left to right, 0deg bottom to top, and 45deg diagonally. The text fills with the gradient in that direction.

Is my text uploaded anywhere?

No — the gradient CSS and preview are generated entirely in your browser.

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.

Example

An indigo-to-pink gradient at 90 degrees produces:

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

Apply this to a heading and its text fills left-to-right from indigo to pink. Everything runs in your browser — nothing is uploaded.

Everything runs in your browser — nothing is uploaded.