Free online tools are the norm for today’s web designers. Why reinvent the wheel when you can save time by using free online services?
You can find plenty of tools online to create color schemes and patterns. But you will spend much more time to find services to create css gradients.

WebGradients

At WebGradients you’ll find a whole collection of ready-made gradients in different colors and styles.
They are all pre-prepared and ready to go. Think of this site as a gradient library with over 180 options.
If you pay attention to the top navigation of the site, there you will find links to download these gradients in both PSD and Sketch files.
You can also copy the gradients as CSS3 code and then add it directly to the site. There are no wrong answers here – there are just a lot of gradients.

uiGradients

Check out the uiGradients library for some interesting css gradient options.
In the top navigation (on the left) you’ll see a button that says “Show all gradients”. Click it to see a huge list of different gradient styles. Seriously, there are a lot of them.
Choose the one you like, and then copy the code to use on the site. You can also download the gradient as a jpg file directly from the toolbar in the upper right corner.

CSS Gradient Animator.

So, gradient animation. The Gradient Animator service is the perfect way to make this a reality. Everything can work right through CSS3 without having to use JavaScript.
On the sidebar, click “Add color” and select the two colors of your gradient one by one. Change the transition speed, change the direction, then click “Preview”.
I am sure you will appreciate the advantage of this online service.

Colorzilla Gradient Editor

Every web designer should know about the Colorzilla gradient editor.
It was one of the very first online services to allow developers to generate CSS gradients from scratch.
Indeed, this is a tool you should add to your bookmarks. And naturally, it already has pre-built gradients.

ColorSpace Gradients.

In addition to being great at matching color schemes, ColorSpace also has its own little gradient generator that allows developers to create custom CSS codes from selected colors.
This gradient service, has a simpler interface than Colorzilla. The controls are pretty obvious. The only downside is that on ColorSpace you can only select two colors at a time.
On Colorzilla, you can make a gradient out of multiple colors. But that doesn’t mean that ColorSpace is worse. It means that it’s best used for simple gradients.

Infinite Gradients.

Yes, that’s exactly what it looks like. Infinite Gradient.
In the top navigation bar, you can add colors, block certain options, and edit certain features of your gradient. The tool works by using the mouse, where you drag the canvas to edit the gradient style. Once you set up the desired gradient, you simply copy the CSS code.
It’s more of a curiosity tool than a practical one. Although, it can be really useful for creative designers.
The service comes with detailed instructions, located here.

Gradient Buttons

A free, open-source library filled with various button designs.
The library is easy to use and has many gradients to choose from.
Take a look at the home page and you’ll find different classes for button sizes, font styles, colors, and shapes. The project is on GitHub if you want to delve deeper into the code.