CoolHue: Hand-Picked Pastel Web Gradient Library

Web gradients are a dime a dozen these days as CSS3 makes it so easy to create gradients from scratch, and with the right code library, it’s even easier.

That’s where the value of coolHue comes in. This free online library is perhaps the best place to find awesome gradients for your site.

Most gradients follow a very bright two-color or three-color pastel selection. But the gradients are easy to edit so you can get these working with any site.

Read Also: Blend Your Own CSS Gradients with This Free Web App

From the main page, it may not look like much. It’s mostly a collection of hand-picked gradients featuring different hues and color choices. Yet, if you visit the GitHub repo you’ll find a whole other story. This collection is the best choice for finding personalized color palettes, all specifically designed for websites.

It’s easy enough to port these gradients into a mobile app UI as well. But I’ve found they’re most useful with newer design trends like drop shadows.

When editing your site you can pass color hues into a custom array variable colorData. This should appear inside your main HTML along with all your gradient elements.

Using JavaScript you have complete control over how the colors blend together. CSS3 can also support multiple colors but it’s tougher to get them working across all page elements and all browsers.

With the coolHue site, you can even download free PNG files of the gradients. This way you can edit them into graphic design projects, website mockups, or use them outside of raw HTML/CSS/JS code.

And if you’re a big Photoshop user there’s even a .grd gradient file with all the coolHue gradients. Awesome right?

Visit the GitHub repo for setup instructions and sample code snippets. There you’ll also find the PS gradient file along with the Sketch gradient file and so much more.