Tailwind Gradient & Color Generator

Design gradients and box shadows visually, then copy the exact Tailwind utility classes — no guessing, no docs-diving.

Direction

From color

Use via color

Via color (optional)

To color

Preview

Tailwind classes

Runs entirely in your browser. Nothing is uploaded.

How it works

STEP 1

Choose from, via, and to colors using the color pickers or enter any Tailwind color name.

STEP 2

Set the direction, opacity, and shadow style. The live preview updates instantly.

STEP 3

One click copies the ready-to-paste Tailwind utility class string to your clipboard.