Gradient text generator (CSS)

Gradient text generator (CSS): what it is for

A heading with gradient letters grabs attention on home pages and landing pages, and it's made with CSS alone: the gradient becomes the text's background and background-clip: text clips it to the shape of the letters.

The generator builds the code with the -webkit- prefix, a fallback color for unsupported browsers, the fix for Windows high-contrast mode and, if you like, a gradient animation that stops for people who prefer less motion. The preview shows the heading on light and dark backgrounds.

How to use

1. Write the text and choose the font and size.
2. Choose the colors and angle.
3. Copy the CSS and apply the class to the heading.

When to use it

• Home page heading.
• Price or call-to-action highlight.
• Text logo.

Frequently asked questions

How is gradient text made?

The gradient is the element's background, and the background-clip: text property clips that background to the shape of the letters; the text color is made transparent so the background shows through. It works with any font and the text stays selectable and readable by screen readers.

Do I need the -webkit- prefix?

The code includes -webkit-background-clip alongside the unprefixed version, because slightly older browsers only accept it with the prefix. The fallback color appears where none of that works.

Can I use it on paragraphs?

It works, but it's better kept for headings and short highlights. In body text the gradient tires the reader and the lighter parts may lack contrast with the background.

Is it really free?

Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

Similar tools