How to work with gradients in CSS / list of online CSS gradient generators

I have CSS code for a gradient which is the following:

/*Gradient*/
background: #0345A9; /* Old browsers */
background: -moz-linear-gradient(top, #0345A9 0%, #032E8F 44%, #001A6E 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0345A9), color-stop(44%,#032E8F), color-stop(100%,#001A6E)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0345A9 0%,#032E8F 44%,#001A6E 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0345A9 0%,#032E8F 44%,#001A6E 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0345A9 0%,#032E8F 44%,#001A6E 100%); /* IE10+ */
background: linear-gradient(top, #0345A9 0%,#032E8F 44%,#001A6E 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0345A9', endColorstr='#001A6E',GradientType=0 ); /* IE6-9 */

Which generates a blue color family gradient.

My question is: What if I want get the counterpart of the blue to lets say green or red. What is the best way to do that? I tried to use color picker but it comes out totally different.

Is there a website that does it for you?

Solution

There are various websites out there, that help you with generating CSS gradients via a easy user interfaces and output the resulting CSS code, e.g.:

http://www.colorzilla.com/gradient-editor/ [*] [#]
http://www.css3factory.com/linear-gradients/
http://ie.microsoft.com/TEStdrive/Graphics/CSSGradientBackgroundMaker [*] (always needs to be background-image: ...]
http://css3gen.com/gradient-generator/
http://www.cssmatic.com/gradient-generator [*]

[*] (import of existing CSS code possible)

[#] (import of existing image with gradient possible)

Regrading the CSS import feature: Usually, you only have to enter one single browser-specific CSS gradient command. Be aware however, that not all websites/generators can handle all browser formats (Mozilla vs. Webkit vs. Opera vs. W3C vs. IE).