Build Tailwind gradients fast
This generator outputs ready-to-paste Tailwind CSS gradient utility classes. Tailwind builds gradients from a direction plus up to three color stops, and getting the class names exactly right by hand is fiddly. Pick a direction and colors — or randomise — and copy a valid className string in one click.
How it works
A Tailwind gradient is composed of three pieces:
bg-gradient-to-{direction} from-{color}-{shade} via-{color}-{shade} to-{color}-{shade}The direction maps a human choice to a suffix: to right becomes -r, to bottom-right becomes -br, and so on. Each stop combines a palette color (blue, emerald, rose…) with a numeric shade (50–900). The via- stop is optional; omitting it gives a clean two-color blend. For example:
<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">…</div>Common use cases
Hero section backgrounds. A diagonal gradient (bg-gradient-to-br) from a brand color to a complementary shade gives a modern, dimensional feel without any custom CSS. Many design systems use a two-stop gradient from a dark shade of the primary color to a lighter shade for exactly this purpose.
Button hover effects. A gradient background on a CTA button (from-indigo-600 to-violet-600) can convey depth and make it feel more tactile than a flat color. Combine with hover:from-indigo-700 hover:to-violet-700 to shift the gradient on hover.
Card headers and section dividers. A subtle light-to-white gradient (from-slate-100 to-white) gives a card header a polished boundary without a hard border.
Text fill gradients. Add bg-clip-text text-transparent to apply the gradient to the text characters rather than a background rectangle — a popular technique for hero headlines.
Choosing shades that look good together
Tailwind’s numeric shades run from 50 (very light) to 900 (very dark). A few patterns consistently produce clean-looking gradients:
- Monochrome step:
from-blue-400 to-blue-700— same hue, wider shade gap. Works well for buttons and subtle cards. - Adjacent hues, similar shades:
from-indigo-500 to-violet-500— neighbouring colors on the wheel at the same shade level blend softly without visual noise. - Light start, dark end:
from-sky-100 to-blue-600— useful for backgrounds where text needs to sit on the lighter end. - Via as accent:
from-rose-500 via-orange-400 to-yellow-300— a warm sweep that works for hero sections when brand guidelines allow vibrant color.
Avoid large shade jumps across unrelated hues (for example, from-red-900 to-lime-100) unless you specifically want a high-contrast, editorial look.
Tailwind v4 note
Tailwind v4 introduces bg-linear-to-r as the canonical gradient class name, replacing bg-gradient-to-r. The older class still works as an alias in v4 but may be deprecated in a future release. If you are starting a new v4 project, prefer the bg-linear-* form; for v2/v3 projects, stick with bg-gradient-to-*.