CSS

CSS Text Gradient Generator

Fill text with a linear, radial or conic gradient using background-clip -- multi-stop colour editor, animated panning option, presets, randomize, and export to CSS, Tailwind, SCSS or React.

What this tool does

Fills text with a gradient using the background-clip: text technique — a gradient background clipped to the exact shape of the letters, with the text colour itself set to transparent so the gradient shows through.

Gradient type and colour stops

Linear (with an adjustable angle), radial, or conic gradient types are all supported, with any number of colour stops, each with its own colour and position — added, removed, or repositioned freely rather than limited to a fixed two-colour fade.

Animated panning

Turning on animation makes the gradient's background- position pan back and forth across an enlarged 200%×200% background, producing the shifting-colour text effect seen on some hero titles, at an adjustable speed.

Editable preview

The preview text, font size, font weight, and preview background colour are all editable, so the gradient can be checked against a realistic heading rather than a fixed placeholder word.

Presets and randomizing

Seven presets — Ocean, Sunset, Rainbow, Fire, Mint, Conic Spin, and Grayscale — cover common looks, plus a randomize button that picks a gradient type and a fresh 2-4 stop colour combination.

Getting the CSS out

Export as plain CSS (including the @keyframes when panning is on), a Tailwind arbitrary-value class string, SCSS, or a React inline style object, copyable with one click.

Privacy

Everything runs locally in your browser -- nothing you build is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?

No. The text and gradient are rendered entirely in the browser -- nothing is sent to a server.

How does a gradient actually fill text with CSS?

background-clip: text clips a background (here, a gradient) to the exact shape of the letters, and setting the text colour to transparent lets the gradient show through instead of a solid colour.

Can I use more than two colours in the gradient?

Yes -- any number of colour stops can be added, each with its own colour and position, not just a fixed start and end colour.

What does the animated panning option do?

It enlarges the gradient's background to 200%×200% and animates its position back and forth, producing a shifting-colour effect across the text rather than a static fill.

Can I preview the gradient on my own heading text?

Yes -- the preview text, font size, font weight, and preview background colour are all editable.

What export formats are available?

Plain CSS (with the @keyframes included when animated panning is on), a Tailwind arbitrary-value class string, SCSS, or a React inline style object -- selectable from a dropdown next to the code output.