Which Tailwind version do these classes target?

The classes use the bg-gradient-to-* syntax from Tailwind v2 and v3, which is the most widely used. Tailwind v4 also accepts bg-linear-to-* as an alias, but bg-gradient-to-* still works.

Do I need the via color?

No. The via stop is optional. With only from- and to-, Tailwind makes a two-color gradient. Adding via- inserts a middle color for a three-stop blend.

Why is my gradient not showing?

Gradients need a direction class (bg-gradient-to-r) plus at least from- and to- stops. Missing the direction or using a color that isn't in your Tailwind config are the usual causes.

Can I use these for text gradients?

Yes. Add bg-clip-text text-transparent to the element alongside the gradient classes, and the gradient will fill the text instead of the background.

Are arbitrary colors supported?

This tool outputs standard palette classes like from-blue-500. For custom hex values, Tailwind supports arbitrary syntax such as from-[#1e40af], which you can substitute manually.

Tailwind CSS Gradient Class Generator

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>

Tips and notes

Keep the from, via and to shades within one or two steps for smooth blends; large jumps create hard bands.
For a text gradient add bg-clip-text text-transparent to the same element.
Tailwind v4 users can swap bg-gradient-to-r for bg-linear-to-r; both compile to the same CSS.