hypercolor.dev - Cool Tailwind Gradients

Hypercolor (Opens in a new tab) is a design tool that offers a collection of gradients and allows you to create your own. If you don't have any fantasy like me when it's about colors, this is a lovely site where you can get some great inspiration!

And yes, I used one of them (Ice) for this site as well. :)

And well, since I have some spare time at hand before hitting the bed, let me share a few.

Cold Dawn

1{/* Tailwind */}
2bg-gradient-to-tr from-indigo-900 via-sky-300 to-lime-200
3
4{/* plain css */}
5background: linear-gradient(to right top, rgb(49, 46, 129), rgb(125, 211, 252), rgb(217, 249, 157))

Still Stone

1{/* Tailwind */}
2bg-[conic-gradient(at_bottom_left,_var(--tw-gradient-stops))] from-white via-stone-500 to-stone-600
3
4{/* plain css */}
5conic-gradient(at left bottom, rgb(255, 255, 255), rgb(120, 113, 108), rgb(87, 83, 78))

Pastel Cotton Candy

1{/* Tailwind */}
2bg-gradient-to-l from-cyan-300 via-amber-200 to-purple-300
3
4{/* plain css */}
5linear-gradient(to left, rgb(103, 232, 249), rgb(253, 230, 138), rgb(216, 180, 254))

Last Dawn

1{/* Tailwind */}
2bg-gradient-to-b from-neutral-700 via-orange-400 to-pink-500
3
4{/* plain css */}
5linear-gradient(rgb(64, 64, 64), rgb(251, 146, 60), rgb(236, 72, 153))
6

Everyday

1{/* Tailwind */}
2bg-[conic-gradient(var(--tw-gradient-stops))] from-yellow-500 via-pink-900 to-blue-400
3
4{/* plain css */}
5conic-gradient(rgb(234, 179, 8), rgb(131, 24, 67), rgb(96, 165, 250))
6

... give the gradient generator a go by yourself (Opens in a new tab), and have some fun with it!