CSSで描くグラデーションには三種類の形状があります。linear-gradient関数によって生成する線形グラデーションと、radial-gradient関数によって生成する放射グラデーション。そしてconic-gradient関数によって生成する扇形グラデーション の3種類です。今回は『linear-gradient』プロパティの設定方法について解説します。
『linear-gradient』プロパティは、ボックスの内側になるbackgroundプロパティに設定する拡張プロパティです。記述方法は下記です。
|
1 |
div { background: linear-gradient(#ccffff, #ffffcc);} |
上記のグラデーションを実際に表示すると下記になります。
「linear-gradient(#ccffff, #ffffcc);」でグラデーションを形成します。「linear-gradient」は直線のグラデーションです。上から#ccffffの色が真下に#ffffccの色に変化したグラデーションです。初期値の角度は垂直です。
グラデーションに角度をつける
グラデーションの角度（向き）を変化させるにはいくつかの方法があります。下記はそのサンプルです。
|
1 |
div { background: linear-gradient(to right, #ccffff, #ffffcc);} |
対角線上にグラデーションをかけた場合は下記になります。「to bottom right」で右下方向にグラデーションとなります。
|
1 |
div { background: linear-gradient(to bottom right, #ccffff, #ffffcc);} |
数値で角度を設定した場合は、角度の単位が「deg」（degreeの略）を用いて設定します。角度の数値を入れると時計回りにグラデーションの方向を変えることができます。
|
1 |
div { background: linear-gradient(45deg, #ccffff, #ffffcc);} |
複数の色のグラデーション
上記までの設定は、起点の色から終点の色までの設定です。ここに複数の設定を挟むことで何色ものグラデーションを作ることができます。
|
1 |
div { background: linear-gradient(90deg, red, yellow, blue, orange;} |
上記のように色をキーワード（カラーコードまたはカラーネーム）で設定することができます。CSSではこのようにあらかじめ色が準備されています。現在基本色は17色あり詳細は「CSSの色見本帳」をご覧ください。
グラデーションに設定した色の場所（色経由点）を移動してグラデーションの色の波長を変更することもできます。
|
1 |
div { background: linear-gradient(90deg, red, yellow 50%, blue 75%, orange;} |
上記の場合、右から左に赤、黄色、青、オレンジの順でグラデーションがかかっていますが、赤から黄色までが左端0％から50％の位置きています。そこから次の青が75％位置になるグラデーションになっています。このように色の場所（色経由点）を任意にずらせることも可能です。