How do I make gradient text in CSS?

Apply a gradient as the background of a text element, then clip the background to the text shape: background: linear-gradient(90deg, #f093fb, #f5576c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;

Does gradient text work in all browsers?

Yes, in all modern browsers. The -webkit- prefix is required for Safari. background-clip: text (without prefix) works in Chrome, Firefox, and Edge. Include both for full support.

Can I use gradient text on any HTML element?

Yes. Apply it to any element containing text — h1, h2, p, span, a, button. The text fill is transparent, so the gradient background shows through the letter shapes.

What happens if background-clip: text is not supported?

The background shows behind the text instead of inside it, which is not ideal. Add a solid color property before the gradient properties as a fallback for very old browsers.

Can I animate gradient text?

Yes, using background-position animation or CSS @property to animate gradient colour stops. Set background-size: 200% and animate background-position for a shimmering effect.

Browse tools

Free · Fast · Privacy-first

CSS Gradient Text Generator

Gradient text is a popular design effect for headings, logos, and call-to-action copy. It uses the CSS background-clip: text technique. FixTools generates the complete CSS needed — gradient definition, background-clip, and text fill — ready to copy and apply to any heading or text element.

⚡ Use Tool Now How it works

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

⚡

Generates complete background-clip: text CSS

🔒

Includes webkit prefix for full browser support

✨

Works on headings, spans, and any text element

CSS Tool

Gradient

All processing happens in your browser — your files are never uploaded to any server.

🚀Open Gradient

100% Free · No account · Works on any device

How to use this tool

💡

Set your gradient colours and direction. The tool generates: background: linear-gradient(90deg, #f093fb, #f5576c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;

How It Works

Step-by-step guide to css gradient text generator:

1
Set your gradient colours
Choose two or more colours for your text gradient. Vibrant colours work best against white or light backgrounds.
2
Choose gradient direction
Horizontal (to right or 90deg) is most common for text gradients. Diagonal (135deg) creates a dynamic effect.
3
Copy the gradient text CSS
Copy the complete CSS block including background-clip: text and -webkit prefixes.
4
Apply to your text element
Add the CSS to your heading or span: h1 { background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
5
Add a fallback colour
For older browsers, set a color value before the gradient properties as a fallback.