Tailwind Gradient Generator
100 unique gradients using Tailwind CSS colors
Click on cards to copy colors or classes • Deterministic gradients (no hydration issues)
Tailwind Colors
stone-700, stone-300, stone-900
Tailwind Classes
bg-gradient-to-t from-stone-700 to-stone-300 via-stone-900
Tailwind Colors
gray-600, gray-200, gray-800
Tailwind Classes
bg-gradient-to-tl from-gray-600 to-gray-200 via-gray-800
Tailwind Colors
pink-500, pink-100, pink-700
Tailwind Classes
bg-gradient-to-l from-pink-500 to-pink-100 via-pink-700
Tailwind Colors
purple-400, violet-50
Tailwind Classes
bg-gradient-to-bl from-purple-400 to-violet-50
Tailwind Colors
blue-300, sky-950
Tailwind Classes
bg-gradient-to-b from-blue-300 to-sky-950
Tailwind Colors
teal-200, teal-900
Tailwind Classes
bg-gradient-to-br from-teal-200 to-teal-900
Tailwind Colors
lime-100, lime-800
Tailwind Classes
bg-gradient-to-r from-lime-100 to-lime-800
Tailwind Colors
orange-50, orange-700, orange-200
Tailwind Classes
bg-gradient-to-tr from-orange-50 to-orange-700 via-orange-200
Tailwind Colors
neutral-950, neutral-600, neutral-100
Tailwind Classes
bg-gradient-to-t from-neutral-950 to-neutral-600 via-neutral-100
Tailwind Colors
gray-900, slate-500, slate-50
Tailwind Classes
bg-gradient-to-tl from-gray-900 to-slate-500 via-slate-50
Tailwind Colors
pink-800, fuchsia-400, fuchsia-950
Tailwind Classes
bg-gradient-to-bl from-pink-800 to-fuchsia-400 via-fuchsia-950
Tailwind Colors
violet-700, violet-300
Tailwind Classes
bg-gradient-to-b from-violet-700 to-violet-300
Tailwind Colors
sky-600, sky-200
Tailwind Classes
bg-gradient-to-br from-sky-600 to-sky-200
Tailwind Colors
emerald-500, emerald-100
Tailwind Classes
bg-gradient-to-r from-emerald-500 to-emerald-100
Tailwind Colors
yellow-400, yellow-50
Tailwind Classes
bg-gradient-to-tr from-yellow-400 to-yellow-50
Tailwind Colors
red-300, red-950, red-500
Tailwind Classes
bg-gradient-to-t from-red-300 to-red-950 via-red-500
Tailwind Colors
neutral-200, zinc-900, zinc-400
Tailwind Classes
bg-gradient-to-tl from-neutral-200 to-zinc-900 via-zinc-400
Tailwind Colors
slate-100, rose-800, rose-300
Tailwind Classes
bg-gradient-to-l from-slate-100 to-rose-800 via-rose-300
Tailwind Colors
fuchsia-50, fuchsia-700, purple-200
Tailwind Classes
bg-gradient-to-bl from-fuchsia-50 to-fuchsia-700 via-purple-200
Tailwind Colors
indigo-950, indigo-600
Tailwind Classes
bg-gradient-to-b from-indigo-950 to-indigo-600
Tailwind Colors
cyan-900, cyan-500
Tailwind Classes
bg-gradient-to-br from-cyan-900 to-cyan-500
Tailwind Colors
green-800, green-400
Tailwind Classes
bg-gradient-to-r from-green-800 to-green-400
Tailwind Colors
amber-700, amber-300
Tailwind Classes
bg-gradient-to-tr from-amber-700 to-amber-300
Tailwind Colors
red-600, stone-200, stone-800
Tailwind Classes
bg-gradient-to-t from-red-600 to-stone-200 via-stone-800
Tailwind Colors
zinc-500, zinc-100, gray-700
Tailwind Classes
bg-gradient-to-tl from-zinc-500 to-zinc-100 via-gray-700
Tailwind Colors
rose-400, rose-50, pink-600
Tailwind Classes
bg-gradient-to-l from-rose-400 to-rose-50 via-pink-600
Tailwind Colors
purple-300, purple-950, purple-500
Tailwind Classes
bg-gradient-to-bl from-purple-300 to-purple-950 via-purple-500
Tailwind Colors
blue-200, blue-900
Tailwind Classes
bg-gradient-to-b from-blue-200 to-blue-900
Tailwind Colors
teal-100, teal-800
Tailwind Classes
bg-gradient-to-br from-teal-100 to-teal-800
Tailwind Colors
green-50, lime-700
Tailwind Classes
bg-gradient-to-r from-green-50 to-lime-700
Tailwind Colors
amber-950, orange-600
Tailwind Classes
bg-gradient-to-tr from-amber-950 to-orange-600
Tailwind Colors
stone-900, stone-500, neutral-50
Tailwind Classes
bg-gradient-to-t from-stone-900 to-stone-500 via-neutral-50
Tailwind Colors
gray-800, gray-400, slate-950
Tailwind Classes
bg-gradient-to-tl from-gray-800 to-gray-400 via-slate-950
Tailwind Colors
pink-800, pink-300, pink-950
Tailwind Classes
bg-gradient-to-l from-pink-800 to-pink-300 via-pink-950
Tailwind Colors
violet-700, violet-200
Tailwind Classes
bg-gradient-to-bl from-violet-700 to-violet-200
Tailwind Colors
sky-600, sky-100
Tailwind Classes
bg-gradient-to-b from-sky-600 to-sky-100
Tailwind Colors
teal-500, emerald-50
Tailwind Classes
bg-gradient-to-br from-teal-500 to-emerald-50
Tailwind Colors
lime-400, yellow-950
Tailwind Classes
bg-gradient-to-r from-lime-400 to-yellow-950
Tailwind Colors
orange-300, orange-900, red-500
Tailwind Classes
bg-gradient-to-t from-orange-300 to-orange-900 via-red-500
Tailwind Colors
neutral-200, neutral-800, neutral-400
Tailwind Classes
bg-gradient-to-tl from-neutral-200 to-neutral-800 via-neutral-400
Tailwind Colors
slate-100, slate-700, slate-300
Tailwind Classes
bg-gradient-to-l from-slate-100 to-slate-700 via-slate-300
Tailwind Colors
fuchsia-50, fuchsia-600, fuchsia-200
Tailwind Classes
bg-gradient-to-bl from-fuchsia-50 to-fuchsia-600 via-fuchsia-200
Tailwind Colors
violet-950, indigo-500
Tailwind Classes
bg-gradient-to-b from-violet-950 to-indigo-500
Tailwind Colors
sky-900, cyan-400
Tailwind Classes
bg-gradient-to-br from-sky-900 to-cyan-400
Tailwind Colors
emerald-800, emerald-300
Tailwind Classes
bg-gradient-to-r from-emerald-800 to-emerald-300
Tailwind Colors
yellow-700, yellow-200
Tailwind Classes
bg-gradient-to-tr from-yellow-700 to-yellow-200
Tailwind Colors
red-600, red-100, red-800
Tailwind Classes
bg-gradient-to-t from-red-600 to-red-100 via-red-800
Tailwind Colors
zinc-500, zinc-50, zinc-700
Tailwind Classes
bg-gradient-to-tl from-zinc-500 to-zinc-50 via-zinc-700
Tailwind Colors
rose-400, rose-950, rose-600
Tailwind Classes
bg-gradient-to-l from-rose-400 to-rose-950 via-rose-600
Tailwind Colors
fuchsia-300, purple-900, purple-500
Tailwind Classes
bg-gradient-to-bl from-fuchsia-300 to-purple-900 via-purple-500
Tailwind Colors
indigo-200, blue-800
Tailwind Classes
bg-gradient-to-b from-indigo-200 to-blue-800
Tailwind Colors
cyan-100, cyan-700
Tailwind Classes
bg-gradient-to-br from-cyan-100 to-cyan-700
Tailwind Colors
green-50, green-600
Tailwind Classes
bg-gradient-to-r from-green-50 to-green-600
Tailwind Colors
amber-950, amber-500
Tailwind Classes
bg-gradient-to-tr from-amber-950 to-amber-500
Tailwind Colors
stone-900, stone-400, stone-50
Tailwind Classes
bg-gradient-to-t from-stone-900 to-stone-400 via-stone-50
Tailwind Colors
zinc-800, gray-300, gray-950
Tailwind Classes
bg-gradient-to-tl from-zinc-800 to-gray-300 via-gray-950
Tailwind Colors
rose-700, pink-200, pink-900
Tailwind Classes
bg-gradient-to-l from-rose-700 to-pink-200 via-pink-900
Tailwind Colors
purple-600, purple-100, violet-800
Tailwind Classes
bg-gradient-to-bl from-purple-600 to-purple-100 via-violet-800
Tailwind Colors
blue-500, blue-50
Tailwind Classes
bg-gradient-to-b from-blue-500 to-blue-50
Tailwind Colors
teal-400, teal-950
Tailwind Classes
bg-gradient-to-br from-teal-400 to-teal-950
Tailwind Colors
lime-300, lime-900
Tailwind Classes
bg-gradient-to-r from-lime-300 to-lime-900
Tailwind Colors
orange-200, orange-800, orange-400
Tailwind Classes
bg-gradient-to-tr from-orange-200 to-orange-800 via-orange-400
Tailwind Colors
stone-100, neutral-700, neutral-300
Tailwind Classes
bg-gradient-to-t from-stone-100 to-neutral-700 via-neutral-300
Tailwind Colors
gray-50, slate-600, slate-200
Tailwind Classes
bg-gradient-to-tl from-gray-50 to-slate-600 via-slate-200
Tailwind Colors
pink-950, pink-500, fuchsia-100
Tailwind Classes
bg-gradient-to-l from-pink-950 to-pink-500 via-fuchsia-100
Tailwind Colors
violet-900, violet-400
Tailwind Classes
bg-gradient-to-bl from-violet-900 to-violet-400
Tailwind Colors
sky-800, sky-300
Tailwind Classes
bg-gradient-to-br from-sky-800 to-sky-300
Tailwind Colors
emerald-700, emerald-200
Tailwind Classes
bg-gradient-to-r from-emerald-700 to-emerald-200
Tailwind Colors
yellow-600, yellow-100
Tailwind Classes
bg-gradient-to-tr from-yellow-600 to-yellow-100
Tailwind Colors
orange-500, red-50, red-700
Tailwind Classes
bg-gradient-to-t from-orange-500 to-red-50 via-red-700
Tailwind Colors
neutral-400, zinc-950, zinc-600
Tailwind Classes
bg-gradient-to-tl from-neutral-400 to-zinc-950 via-zinc-600
Tailwind Colors
slate-300, slate-900, rose-500
Tailwind Classes
bg-gradient-to-l from-slate-300 to-slate-900 via-rose-500
Tailwind Colors
fuchsia-200, fuchsia-800, fuchsia-400
Tailwind Classes
bg-gradient-to-bl from-fuchsia-200 to-fuchsia-800 via-fuchsia-400
Tailwind Colors
indigo-100, indigo-700
Tailwind Classes
bg-gradient-to-b from-indigo-100 to-indigo-700
Tailwind Colors
cyan-50, cyan-600
Tailwind Classes
bg-gradient-to-br from-cyan-50 to-cyan-600
Tailwind Colors
emerald-950, green-500
Tailwind Classes
bg-gradient-to-r from-emerald-950 to-green-500
Tailwind Colors
yellow-900, amber-400
Tailwind Classes
bg-gradient-to-tr from-yellow-900 to-amber-400
Tailwind Colors
red-800, red-300, stone-950
Tailwind Classes
bg-gradient-to-t from-red-800 to-red-300 via-stone-950
Tailwind Colors
zinc-700, zinc-200, gray-900
Tailwind Classes
bg-gradient-to-tl from-zinc-700 to-zinc-200 via-gray-900
Tailwind Colors
rose-600, rose-100, rose-800
Tailwind Classes
bg-gradient-to-l from-rose-600 to-rose-100 via-rose-800
Tailwind Colors
purple-500, purple-50, purple-700
Tailwind Classes
bg-gradient-to-bl from-purple-500 to-purple-50 via-purple-700
Tailwind Colors
blue-400, blue-950
Tailwind Classes
bg-gradient-to-b from-blue-400 to-blue-950
Tailwind Colors
cyan-300, teal-900
Tailwind Classes
bg-gradient-to-br from-cyan-300 to-teal-900
Tailwind Colors
green-200, lime-800
Tailwind Classes
bg-gradient-to-r from-green-200 to-lime-800
Tailwind Colors
amber-100, amber-700
Tailwind Classes
bg-gradient-to-tr from-amber-100 to-amber-700
Tailwind Colors
stone-50, stone-600, neutral-200
Tailwind Classes
bg-gradient-to-t from-stone-50 to-stone-600 via-neutral-200
Tailwind Colors
gray-950, gray-500, gray-100
Tailwind Classes
bg-gradient-to-tl from-gray-950 to-gray-500 via-gray-100
Tailwind Colors
pink-900, pink-400, pink-50
Tailwind Classes
bg-gradient-to-l from-pink-900 to-pink-400 via-pink-50
Tailwind Colors
purple-800, violet-300
Tailwind Classes
bg-gradient-to-bl from-purple-800 to-violet-300
Tailwind Colors
blue-700, sky-200
Tailwind Classes
bg-gradient-to-b from-blue-700 to-sky-200
Tailwind Colors
teal-600, teal-100
Tailwind Classes
bg-gradient-to-br from-teal-600 to-teal-100
Tailwind Colors
lime-500, lime-50
Tailwind Classes
bg-gradient-to-r from-lime-500 to-lime-50
Tailwind Colors
orange-400, orange-950, orange-600
Tailwind Classes
bg-gradient-to-tr from-orange-400 to-orange-950 via-orange-600
Tailwind Colors
neutral-300, neutral-900, neutral-500
Tailwind Classes
bg-gradient-to-t from-neutral-300 to-neutral-900 via-neutral-500
Tailwind Colors
slate-200, slate-800, slate-400
Tailwind Classes
bg-gradient-to-l from-slate-200 to-slate-800 via-slate-400
Tailwind Colors
pink-100, fuchsia-700, fuchsia-300
Tailwind Classes
bg-gradient-to-bl from-pink-100 to-fuchsia-700 via-fuchsia-300
Tailwind Colors
violet-50, indigo-600
Tailwind Classes
bg-gradient-to-b from-violet-50 to-indigo-600
Tailwind Colors
sky-950, sky-500
Tailwind Classes
bg-gradient-to-br from-sky-950 to-sky-500
Tailwind Colors
emerald-900, emerald-400
Tailwind Classes
bg-gradient-to-r from-emerald-900 to-emerald-400
Tailwind Colors
yellow-800, yellow-300
Tailwind Classes
bg-gradient-to-tr from-yellow-800 to-yellow-300
All gradients use only official Tailwind CSS colors
Example: bg-gradient-to-r from-blue-500 to-purple-600
✅ No hydration issues - Deterministic gradients