Tailwind Gradient Generator
Build a gradient from Tailwind's real palette and copy the utility classes straight into your markup.
Pick a direction, choose from / via / to colors, and the class
string updates as you go. Everything runs in the browser. Output defaults to v4; the v4 / v3 toggle
matters more than you would think — v4 renamed bg-gradient-to-r to
bg-linear-to-r.
Preview
Output
bg-linear-to-r from-sky-500 via-indigo-500 to-fuchsia-600
<div class="bg-linear-to-r from-sky-500 via-indigo-500 to-fuchsia-600 h-56 w-full rounded-2xl"></div>
.panel {
background-image: linear-gradient(to right, #0ea5e9, #6366f1, #c026d3);
}
Handy when the gradient has to live in an email template, a canvas fill, or anywhere Tailwind isn't.
Controls
How I actually use this
Nine times out of ten I'm building a hero band or a card header, so I start on a
from-*-500 and walk the to color two or three families around the wheel:
sky to indigo, teal to emerald, amber to rose. Keeping both ends within one step of each other
on the shade scale — 500 to 600, say — keeps the brightness even, and that's the thing
that separates a gradient that looks designed from one that looks like a 2011 button.
The via stop is where gradients get interesting and also where they go wrong. Tailwind
inserts it at 50% by default, so a dark via color in the middle reads as a band rather than a blend.
If that happens, turn on custom stop positions and push via to about 30% — the
transition gets far smoother without touching your colors.
One gotcha worth knowing: for text gradients you need bg-clip-text plus
text-transparent, and the element has to have a background box big enough to cover the
glyphs. Switch the preview to Text and the generator adds both classes for you.
Radial and conic gradients have no first-class utility in v3, so on that setting the tool emits an
arbitrary value that still reads --tw-gradient-stops — meaning your
from / via / to classes keep working exactly as they do for
linear gradients.
Last thing, and it's the kind of detail that costs you an hour if nobody tells you: the preview
above interpolates in sRGB, which is what v3 does. Tailwind v4 interpolates gradients in
oklab by default, so a wide hue jump — blue to yellow, say — will look
a little cleaner in a real v4 build than it does here, with less of the gray sag through the
middle. If you want the old behavior back, v4 lets you ask for it with
bg-linear-to-r/srgb.