CSS Gradient Text Generator

Create gradient-filled text — two colors and an angle — with a live preview and copyable CSS.

Gradient

Frequently asked questions

How does gradient text work?

A gradient background is clipped to the shape of the text with background-clip:text, and the text's own fill is made transparent so the gradient shows through.

Do I need the -webkit- prefix?

Yes, for the widest support. The generated CSS includes both the prefixed and standard properties so it works across browsers.

Can I use more than two colors?

This tool uses two for simplicity. You can add more color stops manually in the generated linear-gradient.