TailwindCSS Gradients

Curated collection of 99 linear gradients made with Tailwind CSS Framework Classes.

Copy Classes

from-cyan-600to-cyan-400

Copy Classes

from-orange-100to-fuchsia-100

Copy Classes

from-blue-500to-gray-100

Copy Classes

from-orange-400to-yellow-300

Copy Classes

from-pink-400to-cyan-300

Copy Classes

from-blue-900to-rose-500

Copy Classes

from-amber-500to-orange-200

Copy Classes

from-violet-900to-cyan-400

Copy Classes

from-orange-200to-orange-100

#10

Copy Classes

from-red-900to-purple-900

#11

Copy Classes

from-teal-300to-teal-500

#12

Copy Classes

from-indigo-200to-neutral-200

#13

Copy Classes

from-red-600to-amber-800

#14

Copy Classes

from-green-300to-indigo-400

#15

Copy Classes

from-rose-100via-pink-300to-purple-400

#16

Copy Classes

from-sky-900to-sky-700

#17

Copy Classes

from-orange-300to-rose-600

#18

Copy Classes

from-lime-600to-neutral-900

#19

Copy Classes

from-fuchsia-300to-violet-500

#20

Copy Classes

from-stone-900to-red-800

#21

Copy Classes

from-cyan-700to-teal-700

#22

Copy Classes

from-gray-100to-blue-500

#23

Copy Classes

from-zinc-400to-orange-500

#24

Copy Classes

from-red-300to-yellow-300

#25

Copy Classes

from-pink-600to-purple-800

#26

Copy Classes

from-cyan-400to-rose-500

#27

Copy Classes

from-slate-400to-cyan-400

#28

Copy Classes

from-purple-600to-blue-300

#29

Copy Classes

from-emerald-900to-green-700

#30

Copy Classes

from-amber-300to-red-600

#31

Copy Classes

from-pink-600to-zinc-900

#32

Copy Classes

from-teal-300to-zinc-300

#33

Copy Classes

from-lime-300to-lime-500

#34

Copy Classes

from-sky-700to-teal-400

#35

Copy Classes

from-lime-100via-indigo-300to-fuchsia-400

#36

Copy Classes

from-rose-500to-orange-500

#37

Copy Classes

from-neutral-900to-teal-600

#38

Copy Classes

from-teal-200to-blue-500

#39

Copy Classes

from-lime-600to-green-400

#40

Copy Classes

from-zinc-400to-gray-100

#41

Copy Classes

from-fuchsia-300to-red-400

#42

Copy Classes

from-green-200to-indigo-500

#43

Copy Classes

from-yellow-200to-pink-400

#44

Copy Classes

from-orange-600to-amber-400

#45

Copy Classes

from-pink-500to-rose-500

#46

Copy Classes

from-purple-900to-green-300

#47

Copy Classes

from-pink-600to-cyan-300

#48

Copy Classes

from-teal-300to-stone-400

#49

Copy Classes

from-rose-500to-orange-600

#50

Copy Classes

from-amber-400to-lime-600

#51

Copy Classes

from-stone-400to-stone-500

#52

Copy Classes

from-lime-200to-sky-200

#53

Copy Classes

from-sky-800to-amber-300

#54

Copy Classes

from-teal-100to-blue-500

#55

Copy Classes

from-green-300to-yellow-200

#56

Copy Classes

from-amber-400to-rose-500

#57

Copy Classes

from-blue-400to-yellow-300

#58

Copy Classes

from-yellow-300to-red-600

#59

Copy Classes

from-amber-300to-teal-600

#60

Copy Classes

from-sky-200to-fuchsia-300

#61

Copy Classes

from-zinc-900to-zinc-600

#62

Copy Classes

from-yellow-400to-yellow-100

#63

Copy Classes

from-pink-400to-amber-200

#64

Copy Classes

from-rose-200to-indigo-200

#65

Copy Classes

from-indigo-500to-black

#66

Copy Classes

from-emerald-500to-emerald-900

#67

Copy Classes

from-teal-300to-cyan-500

#68

Copy Classes

from-sky-200to-blue-500

#69

Copy Classes

from-green-500to-fuchsia-400

#70

Copy Classes

from-lime-500to-violet-900

#71

Copy Classes

from-red-500to-stone-600

#72

Copy Classes

from-neutral-200to-amber-400

#73

Copy Classes

from-fuchsia-700to-neutral-900

#74

Copy Classes

from-green-200to-emerald-400

#75

Copy Classes

from-fuchsia-400

#76

Copy Classes

from-rose-300via-yellow-500to-purple-400

#77

Copy Classes

from-cyan-600to-cyan-200

#78

Copy Classes

from-orange-200to-pink-400

#79

Copy Classes

from-yellow-400to-lime-400

#80

Copy Classes

from-violet-600to-red-600

#81

Copy Classes

from-teal-800to-blue-700

#82

Copy Classes

from-gray-400to-gray-300

#83

Copy Classes

from-red-900to-red-600

#84

Copy Classes

from-lime-900to-lime-700

#85

Copy Classes

from-blackto-teal-900

#86

Copy Classes

from-green-500to-lime-500

#87

Copy Classes

from-cyan-300to-lime-300

#88

Copy Classes

from-teal-800to-cyan-800

#89

Copy Classes

from-teal-300to-cyan-300

#90

Copy Classes

from-blue-800to-rose-700

#91

Copy Classes

from-pink-50to-pink-300

#92

Copy Classes

from-cyan-900to-red-300

#93

Copy Classes

from-sky-900to-orange-500

#94

Copy Classes

from-blue-500to-cyan-800

#95

Copy Classes

from-orange-600to-orange-300

#96

Copy Classes

from-sky-400to-pink-600

#97

Copy Classes

from-sky-100to-cyan-300

#98

Copy Classes

from-purple-600to-purple-500

#99

Copy Classes

from-green-400to-blue-400

Join newsletter

No spam, notifications only about new products, updates and freebies. You can always unsubscribe.

We care about the protection of your data. Read our Privacy Policy.