About this tool
CSS Gradient is a happy little website and free tool that lets you create a gradient background for websites. Besides being a css gradient generator, the site is also chock-full of colorful content about gradients from technical articles to real life gradient examples like Stripe and Instagram.
See gradients were super played out back in the early web days, but now they’re so ubiquitous that you’d be remiss not to drop them in your site, interface, or next hair dye job.
Also, I'm part of a group of makers with a mission to build a better internet, one digital project at a time. One of our recent project launches is Cool Backgrounds another free design tool to generate background wallpaper for websites, blogs and phones.
What's the foundation for beautiful gradients? Gorgeous shades of color, of course! Our color shades pages curate a selection of popular colors, whether you're looking for that wonderful soft baby blue or hyper lime green, check out the shades pages.
Don’t have enough time to make your own gradients? Looking for a supply of popular gradients you can use for your projects? Our swatch collection features a curated selection of gorgeous gradients and color combinations free for you to use however you’d like. Each swatch comes with the basic code you’ll need to implement it on your own website.
If you need a little inspiration before getting started on your own, our gradient examples page is the best place to go. Sometimes all you need is a little push—a source to jumpstart your creativity, and a couple gradient examples could do just that for you. From Stripe to Scale API, browse the examples to give you that jumpstart you need to start making fresh gradients on your own.
Interested in learing how to use blended colors? Our blog exposes the details of everything gradients and even has some in-depth references for you to look at as you learn how to code these elements yourself. Browse through our references, tutorials, and articles for more information all about gradients.