線形グラデーション
上から下へ
左から右へ
左上から右下へ
<!DOCTYPE html>
<html>
<head>
<style>
#grad1{
height:200px;
background: -webkit-linear-gradient(orange, red); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(orange, red); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(orange, red); /* For Firefox 3.6 to 15 */
background: linear-gradient(orange, red); /* 標準構文（最後でなければなりません） */
}
#grad2{
height:200px;
background: -webkit-linear-gradient(left, orange , red); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, orange, red); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, orange, red); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, orange , red); /* 標準構文（最後でなければなりません） */
}
#grad3{
height:200px;
background: -webkit-linear-gradient(left top, orange , red); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, orange, red); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, orange, red); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, orange , red); /* 標準構文（最後でなければなりません） */
}
</style>
</head>
<body>
<h4>線形グラデーション - 上から下へ</h4>
<div id="grad1"></div>
<h4>線形グラデーション - 左から右へ</h4>
<div id="grad2"></div>
<h4>線形グラデーション - 左上から右下へ</h4>
<div id="grad3"></div>
</body>
</html>
線形グラデーション - 角度指定
0 度
90 度
180 度
-90 度
注: Internet Explorer 9 以前のバージョンでは、グラデーションをサポートしていません。
<!DOCTYPE html>
<html>
<head>
<style>
#grad000{
height:100px;
background: -webkit-linear-gradient(0deg, orange, red); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(0deg, orange, red); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(0deg, orange, red); /* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, orange, red); /* 標準構文（最後でなければなりません） */
}
#grad090{
height:100px;
background: -webkit-linear-gradient(90deg, orange, red); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(90deg, orange, red); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(90deg, orange, red); /* For Firefox 3.6 to 15 */
background: linear-gradient(90deg, orange, red); /* 標準構文（最後でなければなりません） */
}
#grad180{
height:100px;
background: -webkit-linear-gradient(180deg, orange, red); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, orange, red); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, orange, red); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, orange, red); /* 標準構文（最後でなければなりません） */
}
#grad-90{
height:100px;
background: -webkit-linear-gradient(-90deg, orange, red); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg, orange, red); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, orange, red); /* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, orange, red); /* 標準構文（最後でなければなりません） */
}
</style>
</head>
<body>
<h3>線形グラデーション - 角度指定</h3>
<div id="grad000" style="color:white;text-align:center;">0 度</div><br>
<div id="grad090" style="color:white;text-align:center;">90 度</div><br>
<div id="grad180" style="color:white;text-align:center;">180 度</div><br>
<div id="grad-90" style="color:white;text-align:center;">-90 度</div>
</body>
</html>
複数のカラーストップ
3 色（均等間隔）
7 色（均等間隔）
3 色（不均等な間隔）
7 色（均等間隔:左→右）
Gradient Background
注: カラーストップは、%を指定しなければ、自動的に均等間隔になります。
注: IInternet Explorer 9 以前のバージョンでは、グラデーションをサポートしていません。
<!DOCTYPE html>
<html>
<head>
<style>
#grad31{
height:200px;
background: -webkit-linear-gradient(red, orange, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, orange, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, orange, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, orange, yellow); /* 標準構文（最後でなければなりません） */
}
#grad32{
height:200px;
background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 標準構文（最後でなければなりません） */
}
#grad33{
height:200px;
background: -webkit-linear-gradient(red 10%, orange 85%, yellow 90%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red 10%, orange 85%, yellow 90%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red 10%, orange 85%, yellow 90%); /* For Firefox 3.6 to 15 */
background: linear-gradient(red 10%, orange 85%, yellow 90%); /* 標準構文（最後でなければなりません） */
}
</style>
</head>
<body>
<h2>複数のカラーストップ</h2>
<h4>3 色（均等間隔）</h4>
<div id="grad31"></div>
<h4>7 色（均等間隔）</h4>
<div id="grad32"></div>
<h4>3 色（不均等な間隔）</h4>
<div id="grad33"></div>
<h4>7 色（均等間隔:左→右）</h4>
<div id="grad34" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Gradient Background
</div>
</body>
</html>