Create beautiful gradient text effects – linear or radial, custom colors, angle, shape & position
Want to embed this text gradient generator on your website? Use this code:
The background-clip trick explained step by step.
Read Tutorial →Multiple color stops, repeating gradients, and animation.
Read Tutorial →| Feature | Our Tool | Tool A | Tool B |
|---|---|---|---|
| Free & unlimited | ✅ | ✅ | ❌ (limit) |
| Live preview | ✅ | ✅ | ✅ |
| Linear & radial | ✅ | ✅ | ✅ |
| Custom angle (0-360) | ✅ | ✅ | ❌ |
| Radial shape & position | ✅ | ❌ | ✅ |
| Swap colors | ✅ | ✅ | ❌ |
| Font size control | ✅ | ❌ | ✅ |
| Custom sample text | ✅ | ❌ | ✅ |
| Download CSS file | ✅ | ❌ | ✅ |
| Client-side / private | ✅ | ❌ | ✅ |
We set a gradient as the background, then use background-clip: text to make the background only show through the text characters. Combined with color: transparent, the text appears as the gradient.
Many browsers (especially older versions of Chrome, Safari, Edge) still require the -webkit- prefix for background-clip: text. Our generated CSS includes both for maximum compatibility.
This generator uses two colors for simplicity. You can easily add more color stops by editing the CSS: linear-gradient(45deg, #667eea, #764ba2, #ff6b6b).
All modern browsers support background-clip: text with the -webkit- prefix. Internet Explorer does not support it, but it will gracefully fall back to a solid color (transparent may hide the text, so consider adding a fallback).
Gradient text adds a modern, eye‑catching touch to headings, logos, and call‑to‑actions. It's a simple way to make your typography pop without using images.
Combine your primary and secondary colors for a cohesive look.
Pure CSS – no images, no extra HTTP requests.
Works on any text element: h1, h2, p, a, etc.
Tools to take your typography further