← All text tools

Gradient text generator

Make colourful gradient text with CSS, or download it as a transparent PNG.

  • Free
  • No sign-up
  • Works on any device

About Gradient text generator

Fill headlines with a colour gradient using CSS background-clip set to text with a transparent text colour. Choose colours, angle and font size, preview it and copy the code. You can also download the result as a transparent PNG for places where CSS is not available, like social posts.

How to use Gradient text generator

  1. Set the options above. The result updates live.
  2. Change anything until it's just right.
  3. Copy the result or download it.

Why use this tool?

Also known as

Frequently asked questions

How does gradient text work in CSS?

You set a linear-gradient as the background, clip it to the text with background-clip: text, and make the text colour transparent so the gradient shows through the letters.

Is Gradient text generator free?

Yes. Gradient text generator on Toolipedia is free to use, with no sign-up and no watermark.

Is it safe to use?

Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.

Does it work on my phone?

Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.

Do I need an account?

No. Just open the page and use the tool. There's no sign-up and no email needed.

Related tools