hypercolor.dev - Cool Tailwind Gradients
Published on
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
![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.](https://images.ctfassets.net/hzu7wkrk7tly/1Sya7mkv1gBc2mUiEhxyjv/21a18d65cc5ee768075cb2a9c0ec6eb5/Hypercolor-ColdDawn.jpeg)
Generated with Hypercolor (Opens in a new tab).
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](https://images.ctfassets.net/hzu7wkrk7tly/7KuOQsr0Ks7pYQPqcnTmhb/5aedcb2e7bd5a85a9f44ef3d81ca9b69/Hypercolor-StillStone.jpeg)
Generated with Hypercolor (Opens in a new tab).
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](https://images.ctfassets.net/hzu7wkrk7tly/1kzfNlJA8siaSaDqabWi6x/1bff5c945228045638e85172034991df/HypercolorPastelCottonCandy.jpeg)
Generated with Hypercolor (Opens in a new tab).
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.](https://images.ctfassets.net/hzu7wkrk7tly/aqIG3tp5GrKE1qTTeNPYG/8facf50e11b3642b4f1e6551d2dbc527/Hypercolor-LastDawn.jpeg)
Generated with Hypercolor (Opens in a new tab).
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
![Everyday, a sharp conic gradient that represents both of the light and dark stages of a day](https://images.ctfassets.net/hzu7wkrk7tly/48QZPSGEUw4NDMF2piW8TW/555ef8157ae1683eb382b9f68c79e0a3/Hypercolor-Everyday.jpeg)
Generated with Hypercolor (Opens in a new tab).
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!