Tailwind gradient generator
Pick colours straight from the Tailwind palette, set direction and stop positions, and copy the exact classes for Tailwind v4 (bg-linear-*) or v3 (bg-gradient-to-*).
<div class="bg-linear-to-r from-pink-500 via-purple-500 to-indigo-500"></div>
Preview uses Tailwind’s hex palette; v4 defines the same colours in OKLCH, so shades can look slightly more saturated on wide-gamut screens.
Tailwind v4 vs v3 gradient classes
| What | Tailwind v4 | Tailwind v3 |
|---|---|---|
| Direction | bg-linear-to-r | bg-gradient-to-r |
| Angle | bg-linear-45, -bg-linear-12 | arbitrary: bg-[linear-gradient(45deg,…)] |
| Radial / conic | bg-radial, bg-conic-180 | arbitrary values only |
| Interpolation | bg-linear-to-r/oklch | not available |
| Stops | from-pink-500 via-purple-500 to-indigo-500, positions from-10% | |
Questions
How do I add a gradient in Tailwind CSS?
In Tailwind v4 use bg-linear-to-r (or bg-linear-45 for an angle) plus colour stops: from-pink-500 via-purple-500 to-indigo-500. In Tailwind v3 the direction class is bg-gradient-to-r; the from/via/to classes are the same.
What changed for gradients in Tailwind v4?
v4 renamed bg-gradient-to-* to bg-linear-to-*, added arbitrary angles (bg-linear-45, -bg-linear-12), radial and conic utilities (bg-radial, bg-conic-180), and interpolation modifiers like bg-linear-to-r/oklch. v4 also blends in OKLab by default, so midpoints are more vivid than in v3.
How do I set stop positions in Tailwind?
Add a percentage utility for each stop: from-10% via-30% to-90%. Positions work in v3.3+ and v4.
Can I use custom colours?
Yes, with arbitrary values: from-[#ff2d87] to-[#ffb800]. For a gradient that doesn’t fit the from/via/to model, use an arbitrary background: bg-[linear-gradient(135deg,#ff2d87,#ffb800)] — the main generator exports this format.
How do I make gradient text in Tailwind?
Combine a gradient with bg-clip-text and text-transparent: class="bg-linear-to-r from-pink-500 to-amber-400 bg-clip-text text-transparent". See the gradient text generator for a version with a solid-colour fallback.