DEV Community

Rudolf Olah
Rudolf Olah

Posted on

Tailwind CSS Linear Gradient Utility Tool

While styling a web app that uses Tailwind CSS, it was becoming tedious to setup linear gradients for buttons and backgrounds.

While sites like hypercolor.dev can show you some good gradient combinations to use, I wanted to be able to experiment with different combinations by selecting the colors from a palette.

So with the help of OpenAI's ChatGPT (GPT-4), I created a utility tool that lets you select the start and end colors and the direction of the gradient. There's a convenient "copy to clipboard" button too.
https://codepen.io/rudolfolah/full/xxMxabo

Image description
Image description

Top comments (4)

Collapse
 
rudolfolah profile image
Rudolf Olah

For custom TailwindCSS palettes: tints.dev/

Collapse
 
learncodeprofessor profile image
LearnCodeProfessor

great job!

Collapse
 
learncodeprofessor profile image
LearnCodeProfessor

I tried to make it in react. Still needs a few changes. but Ill share something soon .

learncodeprofessor.com/tools/tailw...

Collapse
 
rudolfolah profile image
Rudolf Olah

This looks fantastic! Great work 🎉