hypercolor.dev - Cool Tailwind Gradients

Published on

Hypercolor 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

Cool Dawn, a gradient that goes from bottom left blue to top right yellowish. Despite the cold colors, it's still conveying some sense of warmth.
I call this Cool Down, because despite the cold tones, it still conveys a lot of warmth.
Generated with Hypercolor.
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

Still Stone, a linear gradient that conveys the idea of a cold carving stone
This one is Still Stone, because it reminds me of the marbles and stones used to carve those beautiful museum-worthy statues.
Generated with Hypercolor.
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

Pastel Cotton Candy, a cold and muted rainbow that reminds of different flavours of cotton candy
Pastel Cotton Candy proposes a cold and muted rainbow that would serve great for background purposes.
Generated with Hypercolor.
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

Last Dawn, a seemingly warm dawn-inspired gradient that shows top black tones.
Last Dawn represents how a seemingly warm dawn can still feel overwhelming when you're looking at it with your heart full of worries, hence the black top, as if your vision is constantly unable to see the full picture.
Generated with Hypercolor.
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, a sharp conic gradient that represents both of the light and dark stages of a day
Everyday has a strong conic gradient that divides in the top center, conveying to me personally the feeling of a full-cycle day.
Generated with Hypercolor.
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, and have some fun with it!

hypercolor.dev - Tailwind CSS Gradients
Thumbnail attribution(s):

More Snippets

Unknown at rule @apply... k thx bye!

Are we finally done seeing all those "Unknown at rule @apply"?! Because I surely am!

declare-ai.org - ... so, who wrote that?!

Let everyone know how AI helped you... or didn't!