開始位置または角度を指定すると、グラデーションの方向を定義することができる。 開始位置は、toと組み合わせたキーワード（top、bottom、left、right）、角度は時計回りで0deg～359degの角度値で指定する。 開始位置と角度は省略可能で、その場合には初期値のtopになる。

グラデーションの開始色と終了色をカンマ（ , ）区切りで指定する。 さらにその中間に色を増やしてグラデーションの途中色を指定することも可能。 IE8ではサポートしていないため、PIE.ｈｔｃを使用する必要がある。（但し、透明度を指定するrgbaはサポートされていない）

ソースコード

<style type="text/css">
p.sample1, p.sample2, p.sample3 {
   width: 500px;
   height: 120px;
   line-height: 200%;
   font-weight:bold;
   position: relative;
   behavior: url('http://exsample.com/HTML5/PIE.htc');
}
p.sample1 {
background:-webkit-linear-gradient(white, gray);
background: linear-gradient(white, gray);
}
p.sample2 {
background:-webkit-linear-gradient(to left, #ff0000, rgba(255,0,0,0));
background: linear-gradient(to left, #ff0000, rgba(255,0,0,0));
}
p.sample3 {
background:-webkit-linear-gradient(315deg, red, orange, yellow, green, blue, indigo, violet);
background: linear-gradient(315deg, red, orange, yellow, green, blue, indigo, violet);
}
</style>

中略

<p class="sample1">線形グラデーションのサンプル１</p>
<p class="sample2">線形グラデーションのサンプル２</p>
<p class="sample3">線形グラデーションのサンプル３</p>

上記の表示サンプル