TW

Tailwind Gradient Generator

100 unique gradients using Tailwind CSS colors

🎨 199 different colors🧭 8 directions⚡ Ready-to-use classes

Click on cards to copy colors or classes • Deterministic gradients (no hydration issues)

TW

Tailwind Colors

stone-700, stone-300, stone-900

Tailwind Classes

bg-gradient-to-t from-stone-700 to-stone-300 via-stone-900

TW

Tailwind Colors

gray-600, gray-200, gray-800

Tailwind Classes

bg-gradient-to-tl from-gray-600 to-gray-200 via-gray-800

TW

Tailwind Colors

pink-500, pink-100, pink-700

Tailwind Classes

bg-gradient-to-l from-pink-500 to-pink-100 via-pink-700

TW

Tailwind Colors

purple-400, violet-50

Tailwind Classes

bg-gradient-to-bl from-purple-400 to-violet-50

TW

Tailwind Colors

blue-300, sky-950

Tailwind Classes

bg-gradient-to-b from-blue-300 to-sky-950

TW

Tailwind Colors

teal-200, teal-900

Tailwind Classes

bg-gradient-to-br from-teal-200 to-teal-900

TW

Tailwind Colors

lime-100, lime-800

Tailwind Classes

bg-gradient-to-r from-lime-100 to-lime-800

TW

Tailwind Colors

orange-50, orange-700, orange-200

Tailwind Classes

bg-gradient-to-tr from-orange-50 to-orange-700 via-orange-200

TW

Tailwind Colors

neutral-950, neutral-600, neutral-100

Tailwind Classes

bg-gradient-to-t from-neutral-950 to-neutral-600 via-neutral-100

TW

Tailwind Colors

gray-900, slate-500, slate-50

Tailwind Classes

bg-gradient-to-tl from-gray-900 to-slate-500 via-slate-50

TW

Tailwind Colors

pink-800, fuchsia-400, fuchsia-950

Tailwind Classes

bg-gradient-to-bl from-pink-800 to-fuchsia-400 via-fuchsia-950

TW

Tailwind Colors

violet-700, violet-300

Tailwind Classes

bg-gradient-to-b from-violet-700 to-violet-300

TW

Tailwind Colors

sky-600, sky-200

Tailwind Classes

bg-gradient-to-br from-sky-600 to-sky-200

TW

Tailwind Colors

emerald-500, emerald-100

Tailwind Classes

bg-gradient-to-r from-emerald-500 to-emerald-100

TW

Tailwind Colors

yellow-400, yellow-50

Tailwind Classes

bg-gradient-to-tr from-yellow-400 to-yellow-50

TW

Tailwind Colors

red-300, red-950, red-500

Tailwind Classes

bg-gradient-to-t from-red-300 to-red-950 via-red-500

TW

Tailwind Colors

neutral-200, zinc-900, zinc-400

Tailwind Classes

bg-gradient-to-tl from-neutral-200 to-zinc-900 via-zinc-400

TW

Tailwind Colors

slate-100, rose-800, rose-300

Tailwind Classes

bg-gradient-to-l from-slate-100 to-rose-800 via-rose-300

TW

Tailwind Colors

fuchsia-50, fuchsia-700, purple-200

Tailwind Classes

bg-gradient-to-bl from-fuchsia-50 to-fuchsia-700 via-purple-200

TW

Tailwind Colors

indigo-950, indigo-600

Tailwind Classes

bg-gradient-to-b from-indigo-950 to-indigo-600

TW

Tailwind Colors

cyan-900, cyan-500

Tailwind Classes

bg-gradient-to-br from-cyan-900 to-cyan-500

TW

Tailwind Colors

green-800, green-400

Tailwind Classes

bg-gradient-to-r from-green-800 to-green-400

TW

Tailwind Colors

amber-700, amber-300

Tailwind Classes

bg-gradient-to-tr from-amber-700 to-amber-300

TW

Tailwind Colors

red-600, stone-200, stone-800

Tailwind Classes

bg-gradient-to-t from-red-600 to-stone-200 via-stone-800

TW

Tailwind Colors

zinc-500, zinc-100, gray-700

Tailwind Classes

bg-gradient-to-tl from-zinc-500 to-zinc-100 via-gray-700

TW

Tailwind Colors

rose-400, rose-50, pink-600

Tailwind Classes

bg-gradient-to-l from-rose-400 to-rose-50 via-pink-600

TW

Tailwind Colors

purple-300, purple-950, purple-500

Tailwind Classes

bg-gradient-to-bl from-purple-300 to-purple-950 via-purple-500

TW

Tailwind Colors

blue-200, blue-900

Tailwind Classes

bg-gradient-to-b from-blue-200 to-blue-900

TW

Tailwind Colors

teal-100, teal-800

Tailwind Classes

bg-gradient-to-br from-teal-100 to-teal-800

TW

Tailwind Colors

green-50, lime-700

Tailwind Classes

bg-gradient-to-r from-green-50 to-lime-700

TW

Tailwind Colors

amber-950, orange-600

Tailwind Classes

bg-gradient-to-tr from-amber-950 to-orange-600

TW

Tailwind Colors

stone-900, stone-500, neutral-50

Tailwind Classes

bg-gradient-to-t from-stone-900 to-stone-500 via-neutral-50

TW

Tailwind Colors

gray-800, gray-400, slate-950

Tailwind Classes

bg-gradient-to-tl from-gray-800 to-gray-400 via-slate-950

TW

Tailwind Colors

pink-800, pink-300, pink-950

Tailwind Classes

bg-gradient-to-l from-pink-800 to-pink-300 via-pink-950

TW

Tailwind Colors

violet-700, violet-200

Tailwind Classes

bg-gradient-to-bl from-violet-700 to-violet-200

TW

Tailwind Colors

sky-600, sky-100

Tailwind Classes

bg-gradient-to-b from-sky-600 to-sky-100

TW

Tailwind Colors

teal-500, emerald-50

Tailwind Classes

bg-gradient-to-br from-teal-500 to-emerald-50

TW

Tailwind Colors

lime-400, yellow-950

Tailwind Classes

bg-gradient-to-r from-lime-400 to-yellow-950

TW

Tailwind Colors

orange-300, orange-900, red-500

Tailwind Classes

bg-gradient-to-t from-orange-300 to-orange-900 via-red-500

TW

Tailwind Colors

neutral-200, neutral-800, neutral-400

Tailwind Classes

bg-gradient-to-tl from-neutral-200 to-neutral-800 via-neutral-400

TW

Tailwind Colors

slate-100, slate-700, slate-300

Tailwind Classes

bg-gradient-to-l from-slate-100 to-slate-700 via-slate-300

TW

Tailwind Colors

fuchsia-50, fuchsia-600, fuchsia-200

Tailwind Classes

bg-gradient-to-bl from-fuchsia-50 to-fuchsia-600 via-fuchsia-200

TW

Tailwind Colors

violet-950, indigo-500

Tailwind Classes

bg-gradient-to-b from-violet-950 to-indigo-500

TW

Tailwind Colors

sky-900, cyan-400

Tailwind Classes

bg-gradient-to-br from-sky-900 to-cyan-400

TW

Tailwind Colors

emerald-800, emerald-300

Tailwind Classes

bg-gradient-to-r from-emerald-800 to-emerald-300

TW

Tailwind Colors

yellow-700, yellow-200

Tailwind Classes

bg-gradient-to-tr from-yellow-700 to-yellow-200

TW

Tailwind Colors

red-600, red-100, red-800

Tailwind Classes

bg-gradient-to-t from-red-600 to-red-100 via-red-800

TW

Tailwind Colors

zinc-500, zinc-50, zinc-700

Tailwind Classes

bg-gradient-to-tl from-zinc-500 to-zinc-50 via-zinc-700

TW

Tailwind Colors

rose-400, rose-950, rose-600

Tailwind Classes

bg-gradient-to-l from-rose-400 to-rose-950 via-rose-600

TW

Tailwind Colors

fuchsia-300, purple-900, purple-500

Tailwind Classes

bg-gradient-to-bl from-fuchsia-300 to-purple-900 via-purple-500

TW

Tailwind Colors

indigo-200, blue-800

Tailwind Classes

bg-gradient-to-b from-indigo-200 to-blue-800

TW

Tailwind Colors

cyan-100, cyan-700

Tailwind Classes

bg-gradient-to-br from-cyan-100 to-cyan-700

TW

Tailwind Colors

green-50, green-600

Tailwind Classes

bg-gradient-to-r from-green-50 to-green-600

TW

Tailwind Colors

amber-950, amber-500

Tailwind Classes

bg-gradient-to-tr from-amber-950 to-amber-500

TW

Tailwind Colors

stone-900, stone-400, stone-50

Tailwind Classes

bg-gradient-to-t from-stone-900 to-stone-400 via-stone-50

TW

Tailwind Colors

zinc-800, gray-300, gray-950

Tailwind Classes

bg-gradient-to-tl from-zinc-800 to-gray-300 via-gray-950

TW

Tailwind Colors

rose-700, pink-200, pink-900

Tailwind Classes

bg-gradient-to-l from-rose-700 to-pink-200 via-pink-900

TW

Tailwind Colors

purple-600, purple-100, violet-800

Tailwind Classes

bg-gradient-to-bl from-purple-600 to-purple-100 via-violet-800

TW

Tailwind Colors

blue-500, blue-50

Tailwind Classes

bg-gradient-to-b from-blue-500 to-blue-50

TW

Tailwind Colors

teal-400, teal-950

Tailwind Classes

bg-gradient-to-br from-teal-400 to-teal-950

TW

Tailwind Colors

lime-300, lime-900

Tailwind Classes

bg-gradient-to-r from-lime-300 to-lime-900

TW

Tailwind Colors

orange-200, orange-800, orange-400

Tailwind Classes

bg-gradient-to-tr from-orange-200 to-orange-800 via-orange-400

TW

Tailwind Colors

stone-100, neutral-700, neutral-300

Tailwind Classes

bg-gradient-to-t from-stone-100 to-neutral-700 via-neutral-300

TW

Tailwind Colors

gray-50, slate-600, slate-200

Tailwind Classes

bg-gradient-to-tl from-gray-50 to-slate-600 via-slate-200

TW

Tailwind Colors

pink-950, pink-500, fuchsia-100

Tailwind Classes

bg-gradient-to-l from-pink-950 to-pink-500 via-fuchsia-100

TW

Tailwind Colors

violet-900, violet-400

Tailwind Classes

bg-gradient-to-bl from-violet-900 to-violet-400

TW

Tailwind Colors

sky-800, sky-300

Tailwind Classes

bg-gradient-to-br from-sky-800 to-sky-300

TW

Tailwind Colors

emerald-700, emerald-200

Tailwind Classes

bg-gradient-to-r from-emerald-700 to-emerald-200

TW

Tailwind Colors

yellow-600, yellow-100

Tailwind Classes

bg-gradient-to-tr from-yellow-600 to-yellow-100

TW

Tailwind Colors

orange-500, red-50, red-700

Tailwind Classes

bg-gradient-to-t from-orange-500 to-red-50 via-red-700

TW

Tailwind Colors

neutral-400, zinc-950, zinc-600

Tailwind Classes

bg-gradient-to-tl from-neutral-400 to-zinc-950 via-zinc-600

TW

Tailwind Colors

slate-300, slate-900, rose-500

Tailwind Classes

bg-gradient-to-l from-slate-300 to-slate-900 via-rose-500

TW

Tailwind Colors

fuchsia-200, fuchsia-800, fuchsia-400

Tailwind Classes

bg-gradient-to-bl from-fuchsia-200 to-fuchsia-800 via-fuchsia-400

TW

Tailwind Colors

indigo-100, indigo-700

Tailwind Classes

bg-gradient-to-b from-indigo-100 to-indigo-700

TW

Tailwind Colors

cyan-50, cyan-600

Tailwind Classes

bg-gradient-to-br from-cyan-50 to-cyan-600

TW

Tailwind Colors

emerald-950, green-500

Tailwind Classes

bg-gradient-to-r from-emerald-950 to-green-500

TW

Tailwind Colors

yellow-900, amber-400

Tailwind Classes

bg-gradient-to-tr from-yellow-900 to-amber-400

TW

Tailwind Colors

red-800, red-300, stone-950

Tailwind Classes

bg-gradient-to-t from-red-800 to-red-300 via-stone-950

TW

Tailwind Colors

zinc-700, zinc-200, gray-900

Tailwind Classes

bg-gradient-to-tl from-zinc-700 to-zinc-200 via-gray-900

TW

Tailwind Colors

rose-600, rose-100, rose-800

Tailwind Classes

bg-gradient-to-l from-rose-600 to-rose-100 via-rose-800

TW

Tailwind Colors

purple-500, purple-50, purple-700

Tailwind Classes

bg-gradient-to-bl from-purple-500 to-purple-50 via-purple-700

TW

Tailwind Colors

blue-400, blue-950

Tailwind Classes

bg-gradient-to-b from-blue-400 to-blue-950

TW

Tailwind Colors

cyan-300, teal-900

Tailwind Classes

bg-gradient-to-br from-cyan-300 to-teal-900

TW

Tailwind Colors

green-200, lime-800

Tailwind Classes

bg-gradient-to-r from-green-200 to-lime-800

TW

Tailwind Colors

amber-100, amber-700

Tailwind Classes

bg-gradient-to-tr from-amber-100 to-amber-700

TW

Tailwind Colors

stone-50, stone-600, neutral-200

Tailwind Classes

bg-gradient-to-t from-stone-50 to-stone-600 via-neutral-200

TW

Tailwind Colors

gray-950, gray-500, gray-100

Tailwind Classes

bg-gradient-to-tl from-gray-950 to-gray-500 via-gray-100

TW

Tailwind Colors

pink-900, pink-400, pink-50

Tailwind Classes

bg-gradient-to-l from-pink-900 to-pink-400 via-pink-50

TW

Tailwind Colors

purple-800, violet-300

Tailwind Classes

bg-gradient-to-bl from-purple-800 to-violet-300

TW

Tailwind Colors

blue-700, sky-200

Tailwind Classes

bg-gradient-to-b from-blue-700 to-sky-200

TW

Tailwind Colors

teal-600, teal-100

Tailwind Classes

bg-gradient-to-br from-teal-600 to-teal-100

TW

Tailwind Colors

lime-500, lime-50

Tailwind Classes

bg-gradient-to-r from-lime-500 to-lime-50

TW

Tailwind Colors

orange-400, orange-950, orange-600

Tailwind Classes

bg-gradient-to-tr from-orange-400 to-orange-950 via-orange-600

TW

Tailwind Colors

neutral-300, neutral-900, neutral-500

Tailwind Classes

bg-gradient-to-t from-neutral-300 to-neutral-900 via-neutral-500

TW

Tailwind Colors

slate-200, slate-800, slate-400

Tailwind Classes

bg-gradient-to-l from-slate-200 to-slate-800 via-slate-400

TW

Tailwind Colors

pink-100, fuchsia-700, fuchsia-300

Tailwind Classes

bg-gradient-to-bl from-pink-100 to-fuchsia-700 via-fuchsia-300

TW

Tailwind Colors

violet-50, indigo-600

Tailwind Classes

bg-gradient-to-b from-violet-50 to-indigo-600

TW

Tailwind Colors

sky-950, sky-500

Tailwind Classes

bg-gradient-to-br from-sky-950 to-sky-500

TW

Tailwind Colors

emerald-900, emerald-400

Tailwind Classes

bg-gradient-to-r from-emerald-900 to-emerald-400

TW

Tailwind Colors

yellow-800, yellow-300

Tailwind Classes

bg-gradient-to-tr from-yellow-800 to-yellow-300

249
Total colors applied
199
Unique Tailwind colors
8
Gradient directions

All gradients use only official Tailwind CSS colors

Example: bg-gradient-to-r from-blue-500 to-purple-600

✅ No hydration issues - Deterministic gradients