Tailwind CSS Gradient Generator
Choose if you are looking for text or background gradients.
Choose Colors
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
Settings
Add the third color if needed and set the direction of the gradient if you are looking for a linear-gradients or radial-gradient.