CSSによるグラデーション

画像を使わず、スタイルのみで<div>等の要素にグラデーションの背景色を実現します。

※テストに利用したブラウザは以下です。 ※文章中の色の呼称の表記は必ずしも正確ではありません。

Modern Browser (Webkit, Gecko等)

以下はMozilla Developers Network（以下MDN）のCSS Referenceを簡潔にまとめたものです。
主にFirefoxやGoogle ChromeといったモダンWebブラウザの最新版に対応するCSSの書き方として参考にしてください。
W3CのMarkUp仕様にも準拠しています。

線形グラデーション

線形グラデーションを実現するにはlinear-gradient関数を背景に適用する必要があります。
linear-gradient([(角度) | to [left|right]|[top|bottom],] (色) [％表記|長さ値], (色)+....);
※(角度) … 角度にはグラデーションする角度を指定します。45度の場合、'45deg'や'0.25turn'等と記述します。
※to[～] … グラデーションする方向を示します。'to left top'や'to bottom'のように記述します。
※(色) … 色の指定は#FFFFFFの16進数方式です。（ほかの色指定と一緒）

★サンプル01
左上に向かって
赤→オレンジ→黄色→黄緑→緑→水色→青→紫→ピンク→白
の10色を10％ずつ表示しています。
ソースは以下のようになります。
<div style="background-image: linear-gradient(to left top, #FF0000 10%, #FFCC00 20%, #FFFF00 30%, #CCFF00 40%, #00FF00 50%, #00CCFF 60%, #0000FF 70%, #CC00FF 80%, #FF00FF 90%, #FFCCFF 100%);">

★サンプル02
90°の角度で
55pxまでが水色、105pxまでに白になり、160pxまでで薄い緑色に
グラデーションします。
ソースは以下のようになります。
<div style="background-image: linear-gradient(90deg, #00C9FF 55px, #FFFFFF 105px, #00FFC9 160px);">

より詳しい解説は以下を参照してください。
MDN CSS reference linear-gradient

放射グラデーション

放射グラデーションを実現するにはradial-gradient関数を背景に適用する必要があります。
background-image: radial-gradient(
['circle' | 長さ値] [at (position)]? , (色) [％表記|長さ値], (色)+....
or ['ellipse' | [長さ値 | ％表記]] [at (position)]? , (色) [％表記|長さ値], (色)+....
or [['circle' | 'ellipse'] | (ExtentKeyword)] [at (position)]? , (色) [％表記|長さ値], (色)+....
or at (position) , (色) [％表記|長さ値], (色)+....
);
※書き方が4パターンあります。
※'circle'が正円、'ellipse'が楕円を意味しています。
※(position) … background-position と同様の効果です。デフォルトではcenterになっています。
※上段３つのパターンの時はat (position)はなくても大丈夫です。
※(ExtentKeyword) … 'closest-side','closest-corner','farthest-side','farthest-corner'の4種類

★サンプル01
中心位置が左上から50px,50pxの位置の正円で
水色が30%地点→ピンクが65%地点
のグラデーションです。
ソースは以下のようになります。
<div style="background-image: radial-gradient(circle at 50px 50px, #00FFFF 30%, #FF00FF 65%);">

★サンプル02
中心位置は指定なしでDIVの中心となる楕円。
黄色が20%きざみで明度を落としていく
グラデーションです。
ソースは以下のようになります。
<div style="background-image: radial-gradient(ellipse 40% at 80px 10px, #FFFF00 20%, #DDDD00 40%, #BBBB00 60%, #999900 80%);width:160px;height:80px;magin:auto;">

★サンプル03
中心位置が左から80px,上から10pxの楕円で
青が20%刻みで再度を落としていく
グラデーションです。
中心位置から一番近いDIVの四隅（closest corner）まで
がグラデーションの範囲になるため、上部に寸詰まっています。
ソースは以下のようになります。
<div style=" background-image: radial-gradient(ellipse closest-corner, #0000FF 20%, #3333FF 40%, #6666FF 60%, #9999FF 80%, #BBBBFF 100%); ">

★球体を描いてみる
ここでは特別にborder-radias属性も利用して、疑似的に球体を描いてみます。
ピンク色の球体が描けているでしょうか？
ソースは以下のようになります。
<div style=" background-image: radial-gradient(circle at 45px 45px, #FFFFFF 10%, #FFDDFF 20%, #FF00FF 100%);
-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
width:160px;height:160px;line-height:160px;text-align:center;magin:auto;
">

より詳しい解説は以下を参照してください。
MDN CSS reference radial-gradient

線形グラデーション（繰り返し）

線形グラデーション（繰り返し）を実現するにはrepeating-linear-gradient関数を背景に適用する必要があります。
repeating-linear-gradient([(角度) | to [left|right]|[top|bottom],] (色) [％表記|長さ値], (色)+....);
※linear-gradientと同様です。

★サンプル01
右に向かって
水色から始まり、20%までに濃いグレーになる
２色グラデーションを繰り返しています。
ソースは以下のようになります。
<div style=" background-image: repeating-linear-gradient(to right, #1AC6CC, #646464 20%); ">

★サンプル02
45°の角度でゼブラ模様を実装しています。
黒で開始→25pxまで黒→そこから25pxまで透明（transparent）
→そこから25pxまで黄→そこから50pxまで黄
のグラデーションを繰り返すことで実現できます。
ソースは以下のようになります。
<div style=" background-image: repeating-linear-gradient(45deg, #000000, #000000 25px, transparent 25px, #FFFF00 25px, #FFFF00 50px); ">

より詳しい解説は以下を参照してください。
MDN CSS reference repeating-linear-gradient

放射グラデーション（繰り返し）

放射グラデーション（繰り返し）を実現するにはrepaeting-radial-gradient関数を背景に適用する必要があります。
background-image: radial-gradient(
['circle' | 長さ値] [at (position)]? , (色) [％表記|長さ値], (色)+....
or ['ellipse' | [長さ値 | ％表記]] [at (position)]? , (色) [％表記|長さ値], (色)+....
or [['circle' | 'ellipse'] | (ExtentKeyword)] [at (position)]? , (色) [％表記|長さ値], (色)+....
or at (position) , (色) [％表記|長さ値], (色)+....
);
※radial-gradientと同様です。

★虹の的
中心がDIVの中心の正円でグラデーションします。
10px刻みで、赤→黄→緑→青→紫のあとに
0pxの透明→白をはさみ、60pxまで白にグラデーションします。
これを繰り返すことで、40px幅の虹を20px間隔で描いています。
ソースは以下のようになります。
<div style=" background-image: repeating-radial-gradient(circle , red, yellow 10px, green 20px, blue 30px, violet 40px, transparent 40px, white 40px, white 60px);
-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;border: solid 1px #black;
width:480px;height:480px;magin:auto; ">

より詳しい解説は以下を参照してください。
MDN CSS reference repeating-linear-gradient


古いブラウザへの対応

ここからはクロスブラウザに対応するための小技を紹介します。
ごく一部の紹介になりますが、今後対応が不要になっていくはずですので参考程度にご覧ください。
より詳細に知りたい場合は「ベンダプリフィックス（Vendor Pre Fix）」をキーワードに検索等してみてください。

旧式のWebkitへの対応（Chrome10-, Safari5.1-）

古いGoogle Chroem(Ver10以下)や古いSafari(Ver5.1以下)への対応が必要な場合、専用に特別な関数を使用してみてください。
-webkit-gradient([linear|radial], [from], [to], color-stop((length),(color)), color-stop繰り返し ...)
※第一引数に「linear」または「radial」が増えています。
※グラデーションの方向を示す文字列は頭に「to」を付けない。

★サンプル
「線形グラデーション.サンプル01」にある
左上に向かう、赤からUltraViolet（虹）を再現しています。
しかし、角度までは再現できませんでした...。
モダンブラウザでは見ることが出来ませんが、
上記に挙げた古いブラウザなら確認することが出来ます。
ソースは以下のようになります。
<div style=" background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0.00, #FF0000), color-stop(0.20, #FFCC00), color-stop(0.30, #FFFF00), color-stop(0.40, #CCFF00), color-stop(0.50, #00FF00), color-stop(0.60, #00CCFF), color-stop(0.70, #0000FF), color-stop(0.80, #CC00FF), color-stop(0.90, #FF00FF), color-stop(1.00, #FFCCFF)); ">


旧式のGeckoへの対応

古いFirefox(Ver3.6～15)への対応が必要な場合の書き方です。
-moz-linear-gradient([left|right]|[top|bottom],以下同様)
※グラデーションの方向を示す文字列は頭に「to」を付けない。

★サンプル
「線形グラデーション.サンプル01」にある
左上に向かう赤らからUltraViolet（虹）を再現しています。
しかし、角度までは再現できませんでした...。
モダンブラウザでは見ることが出来ませんが、
上記に挙げた古いブラウザなら確認することが出来ます。
ソースは以下のようになります。
<div style=" background-image: -webkit-gradient(linear left top, #FF0000 10%, #FFCC00 20%, #FFFF00 30%, #CCFF00 40%, #00FF00 50%, #00CCFF 60%, #0000FF 70%, #CC00FF 80%, #FF00FF 90%, #FFCCFF 100%) ">


うんこブラウザIE９以下への対応

InternetExplorerはWebデザインをするうえで、いつも開発者を苦しめます。
今回の例でいうと、IE９以下を利用しているユーザには、上記のCSSサンプルは一切見えていません。
それでもグラデーションを実現したい場合、いくつかの代替案があります。

方法01

IE独自のfilterプロパティ.Gradient()を使用します。
正確には、背景と内容の間にグラデーションのフィルターを差し込むものです。
IE5.5～IE9に対応しています。
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=[0|1], StartColorStr=(#AARRGGBB), EndColorStr=(#AARRGGBB));
※GradientType … 0は縦のグラデーション、1は横のグラデーション
※StartColorStr … 開始色のパターン
※EndColorStr … 終了色のパターン
※(#AARRGGBB) … AAは00（透明）～FF（不透明）を指定し、RRGGBBはFFFFFF形式で色を指定
★サンプル
水色～濃い水色の横方向グラデーション。
ソースは以下になります。
<div style=" filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#FF00FFFF, EndColorStr=#FFCCFFFF); ">

方法02

以下のサイトでSVG画像の背景としてグラデーションを作ってしまう。
SVG Gradient Background Maker
Scalable Vector Graphicsのbase64エンコード文字列を生成してくれるので適当に色を指定して試してみましょう。
SVGに対応しているブラウザは多いので、これだけで簡単なグラデーションならクロスブラウザ対応となります。
background-image:url(data:image/svg+xml;base64,(画像を表すbase64エンコード文字列));
※生成したプロパティをそのままスタイルとしてコピペします。
★サンプル
#00CCEE～#FFFFFの線形グラデーションです。
ソースは以下になります。
<div style="
background-image:url(data:image/svg+xml;base64,
PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdp
ZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEi
IHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGll
bnQgaWQ9ImczMjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNl
IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0
b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgb2Zmc2V0PSIwIi8+PHN0b3Ag
c3RvcC1jb2xvcj0iIzAwQ0NFRSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFy
R3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWln
aHQ9IjEiIGZpbGw9InVybCgjZzMyNCkiIC8+Cjwvc3ZnPg==
); ">
お分かりになると思いますが、ソースがかなり読みづらくなってしまいます。


まとめ

古いIEから最新のChromeまで、様々なブラウザに対応したグラデーションを実装するには、上記までのパターン分のスタイル指定をしなくてはいけません。
今回は簡単な線形グラデーションをIE5.5～Chrome最新版全部に対応させたスタイルを１つ記述してまとめとします。
追記や訂正は適宜行っていきますので、今後ともよろしくお願いいたします。

サンプル

#00CCEE～#FFFFFの線形グラデーションです。
ソースは以下になります。
<div style="
/* IE10 Consumer Preview Version. */
background-image: -ms-linear-gradient(top, #007AE6 30%, #00C3FF 80%);
/* Mozilla Firefox. */
background-image: -moz-linear-gradient(top, #007AE6 30%, #00C3FF 80%);
/* Opera. */
background-image: -o-linear-gradient(top, #007AE6 30%, #00C3FF 80%);
/* Webkit(Safari/Chrome10). */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.3, #007AE6), color-stop(0.8, #00C3FF));
/* Webkit(Chrome11+). */
background-image: -webkit-linear-gradient(top, #007AE6 30%, #00C3FF 80%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #007AE6 30%, #00C3FF 80%);
/* IE5.5-9. */
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FF007AE6, EndColorStr=#FF00C3FF);
">


おまけ

このページのサンプルをいろいろなブラウザで見たときのスクリーンショットです。

Firefox 3.6



★IE 9



★Safari 5.0



★Chrome 23