現在、ほぼすべてのブラウザで、CSSでグラデーションが使えます。

画像を使わなくてすむので、SEOで有利、ページ容量を減らす等、色々な利点があります。

ただ、現在ブラウザごとに記述が変わったり、なかなか視覚的にわかりずらいかと思います。

そこで、私もよくつかうこのツール

http://www.colorzilla.com/gradient-editor/

外国のサイトですが、使い方はとてもシンプル
英語がわからなくても大丈夫かと思います。

Illustrator Photoshop などの「グラデーションツール」と似た
仕様になっていますので、一度使われたことがある方はわかりやすいと思います。

簡単な説明をしますと。

1.「Presets」のスライダーで色等を調節
2.「Preview」に色の見本がでます。
3.もし大丈夫なら、「CSS」をコピーして、ご自分のスタイルシートに貼り付けるだけです。

ブラウザのバージョンや種類に対応するように何種類かの記述がありますので 不必要な物は削除するとスッキリします。