WebGradients: Online Library of 180+ CSS Linear Gradients
Free library of gradients in CSS, .PNG, and PSD format to download and be used in any project.
With so many free code generators on the web it’s easy to create your own gradients. But the trouble is finding the right colors to match your website, your Click-to-Action button, or whatever else you’re designing.
WebGradients offers a free library of gradients you can browse through and dig up cool ideas. These are totally free and they all include the CSS3 source code along with PNGs.
Read Also: Colors.css Offers New Defaults for Colors on The Web
In fact, the entire application is available on GitHub which offers pretty much everything at the click of a button.
You can download the full gradient pack straight from GitHub as raw CSS codes inside a stylesheet file. Or you can download the gradients as raw PNG files, a Sketch file, or a PSD file for Photoshop.
This is truly a massive collection of free gradients that should help any web designer. You can use this for every step of the design process from web mockup design all the way to frontend coding.
If you click any of the gradient circles you’ll get a full view expanded over the entire page. This lets you see how the gradient would look as a background, a pretty cool effect!
Plus you’ll find a download button in the top-right corner along with a link to copy the CSS right to your clipboard.
Both of the PSD and Sketch files are linked in the navbar where they’re hosted on Gumroad.
Typically people use Gumroad as an online merchant but many designers release their stuff for free with optional gratuity. When downloading the files you can add a tip if you want, but either way both the Sketch and PSD files are released for free.
Not every gradient in this list will work for your website. But it’s a fairly comprehensive gallery with 180 gradients so there’s bound to be something here you might like.