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.

Is my text uploaded anywhere?

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

CSS Text Gradient Generator

Create gradient-filled text and copy the CSS.

CSS text gradient generator

Fill any text with a smooth colour gradient. Pick a start and end colour, set the angle, and preview the result live. The tool outputs the background-clip: text technique — a gradient background clipped to the letter shapes with transparent text fill — including the -webkit- prefix for broad browser support.

Everything runs in your browser — nothing is uploaded.