linear-gradient(角度か方向, 開始する色, 終了する色);で線形グラデーションを指定することができます。 指定する色は３色以上にすることも可能です。

<p>タグのボックスで使用例を挙げてみます。 グラデーションの角度や方向は以下の通り。

角度45度、最初は白色ではじまり最後は黒色に変化しています。

【ブラウザ表示】

角度45度

<p class="senkei_gbox">角度45度</p>

p.senkei_gbox {
padding:10px;
background: linear-gradient(45deg, white, black);
}

<p style="padding:10px; background:linear-gradient(45deg, white, black); ">角度45度</p>

■ 単色グラデーション

この例では角度0度、0～49％は白色、49%～50%は白色から青色へ、50%～51%は青色から白色へ、51％～100％は白色のように指定すると１本の線のように表示されます。

【ブラウザ表示】

角度0度の単色グラデーション

<p class="senkei_gbox2">角度0度の単色グラデーション</p>

p.senkei_gbox2{
width:200px;
height:200px;
background:linear-gradient(0deg, white 49%, blue 50%, white 51%);
}

<p style="width:200px; height:200px;background:linear-gradient(0deg, white 49%, blue 50%, white 51%);">角度0度の単色グラデーション</p>

■ 集中線グラデーション

linear-gradient()プロパティをカンマで区切り複数指定することもできます。開始色と終了色を透明にし 上の例と同じように指定すると４本の単色の線が交わり集中線のようなグラデーションになります。
2番目以降のlinear-gradientで開始色、終了色がtransparentではなくwhiteを指定した場合は1本の線しか表示 されません。

【ブラウザ表示】

集中線グラデーション

<p class="senkei_gbox3">集中線グラデーション</p>

p.senkei_gbox3{
width:200px;
height:200px;
background:linear-gradient(-45deg, transparent 49%, blue 50%, transparent 51%),
linear-gradient(45deg, transparent 49%, blue 50%, transparent 51%),
linear-gradient(0deg, transparent 49%, blue 50%, transparent 51%),
linear-gradient(180deg, transparent 49%, blue 50%, transparent 51%),
linear-gradient(90deg, transparent 49%, blue 50%, transparent 51%);
}

<p style="width:200px; height:200px;background:linear-gradient(-45deg, transparent 49%, blue 50%, transparent 51%),linear-gradient(45deg, transparent 49%, blue 50%, transparent 51%),linear-gradient(0deg, transparent 49%, blue 50%, transparent 51%),linear-gradient(180deg, transparent 49%, blue 50%, transparent 51%),linear-gradient(90deg, transparent 49%, blue 50%, transparent 51%);">集中線グラデーション</p>

■ その他の項目

スタイルシート一覧のページに戻る