Choose if you are looking for text or background gradients.
Pick colors from the Tailwind CSS Palette that fit your design.
slate
50
100
200
300
400
500
600
700
800
900
gray
50
100
200
300
400
500
600
700
800
900
zinc
50
100
200
300
400
500
600
700
800
900
neutral
50
100
200
300
400
500
600
700
800
900
stone
50
100
200
300
400
500
600
700
800
900
red
50
100
200
300
400
500
600
700
800
900
orange
50
100
200
300
400
500
600
700
800
900
amber
50
100
200
300
400
500
600
700
800
900
yellow
50
100
200
300
400
500
600
700
800
900
lime
50
100
200
300
400
500
600
700
800
900
green
50
100
200
300
400
500
600
700
800
900
emerald
50
100
200
300
400
500
600
700
800
900
teal
50
100
200
300
400
500
600
700
800
900
cyan
50
100
200
300
400
500
600
700
800
900
sky
50
100
200
300
400
500
600
700
800
900
blue
50
100
200
300
400
500
600
700
800
900
indigo
50
100
200
300
400
500
600
700
800
900
violet
50
100
200
300
400
500
600
700
800
900
purple
50
100
200
300
400
500
600
700
800
900
fuchsia
50
100
200
300
400
500
600
700
800
900
pink
50
100
200
300
400
500
600
700
800
900
rose
50
100
200
300
400
500
600
700
800
900
Add the third color if needed and set the direction of the gradient if you are looking for a linear-gradients or radial-gradient.
Choose from our ready-made Tailwind CSS gradients to create beautiful cards, mobile apps, and websites.
Sunset
red-500 - orange-500
Poppy
rose-400 - red-500
Rosebud
pink-500 - rose-500
Sunshine
amber-200 - yellow-400
Gold
amber-200 - yellow-500
Twilight
amber-500 - pink-500
Powder
violet-200 - pink-200
Holly
blue-200 - cyan-200
Northern Lights
teal-200 - teal-500
Raw Green
lime-400 - lime-500
Lime
teal-400 - yellow-200
Nemesia
emerald-400 - cyan-400
Snowflake
indigo-400 - cyan-400
Blue Bird
cyan-500 - blue-500
Blueprint
indigo-500 - blue-500
Salvia
blue-600 - violet-600
Snowflake
fuchsia-500 - cyan-500
Heartsease
fuchsia-600 - pink-600
Amaranthus
fuchsia-600 - purple-600
Candy
fuchsia-500 - pink-500
Verbena
violet-500 - purple 500
Clematis
violet-600 - indigo-600
Hibiscus
purple-500 - purple-900
Clear Night
blue-800 - indigo-900
Clay
neutral-300 - stone-400
Soil
stone-500 - stone-700
Silver
slate-300 - slate-500
Fir Tree
emerald-500 - emerald-900
Metal
slate-500 - slate-800
Darkness
slate-900 - slate-700