Add eye-catching gradient text to your site. Our free CSS Text Gradient Generator gives you a live preview and the ready-to-paste CSS — no design skills needed.
Paste the CSS into your stylesheet and add the class to any text. Everything runs in your browser; nothing is uploaded.
How to Use
- Type the text you want to style.
- Pick your two gradient colours with the colour pickers.
- Adjust the gradient angle and font size.
- Watch the live preview update instantly.
- Click Copy CSS, paste it into your stylesheet and add the class to your text.
Key Features
- Live gradient text preview.
- Colour pickers, angle and font-size controls.
- Clean, ready-to-paste CSS output.
- Uses background-clip for crisp text gradients.
- 100% private — everything runs in your browser.
FAQs
How do I use the CSS on my website?
Paste the copied CSS into your stylesheet, then add class="gradient-text" to any heading or paragraph. The gradient will apply automatically.
Does gradient text work in all browsers?
All modern browsers support it. The output includes the -webkit- prefix so it also works in Safari and older Chrome versions.
Can I use more than two colours?
Yes — add extra colour stops to the linear-gradient value, for example linear-gradient(90deg, #0F766E, #F59E0B, #EF4444).
What does background-clip: text do?
It clips the background gradient to the shape of the text itself, with transparent text colour letting the gradient show through.
Is my data sent anywhere?
No. The generator runs entirely in your browser with JavaScript, so nothing leaves your device.
Related Tools
You may also like our CSS Gradient Generator, CSS Text Shadow Generator and Color Palette Generator.