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

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

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

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

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

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, and have some fun with it!


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


More Snippets

Tailwind Merge: clean your code by removing conflicting styling

Tired to have lots of redundant overlapping tailwind classes in your components? Tailwind Merge will sweep redundancy for you!

Raycast: Supercharged productivity

Raycast is the one tool that stands behind its words, as it promises a "Supercharged" productivity and it surely delivers!

RaycastApps
+2