Gradient Generator

I love colors and as an extension, I love gradients too. But, I do not have the patience to sit around and pick colors that form a good gradient. So, I made this! Ta-da! A gradient generator!

image of gradient generator

Project Details

This project produces an endless list of beautiful gradients. I used some basic understanding of color theory and HSL color model and put them together to get colors that may complement each other and look good together as a gradient too. Gradients are becoming a trend in web development, don’t you think? I mean, look at Instagram’s new logo. This tool can prove to be useful to all who wish to the gradient-way.

If you come across a gradient that you like, you can copy a cross-browser compatible CSS code for it. If you want to have a better look, just click on a card and it takes you to the full-screen view. Click on the screen again to return to the list.

Check out the project at

For those of you who are fans of flat color – fear not, I got your back! Check out that generates flat pastel colors.



Leave a Reply

Your email address will not be published. Required fields are marked *