linear-gradient プロパティ|グラデーション

CSSで描くグラデーションには三種類の形状があります。linear-gradient関数によって生成する線形グラデーションと、radial-gradient関数によって生成する放射グラデーション。そしてconic-gradient関数によって生成する扇形グラデーション の3種類です。今回は『linear-gradient』プロパティの設定方法について解説します。

linear-gradient』プロパティは、ボックスの内側になるbackgroundプロパティに設定する拡張プロパティです。記述方法は下記です。

div { background: linear-gradient(#ccffff, #ffffcc);}

上記のグラデーションを実際に表示すると下記になります。

「linear-gradient(#ccffff, #ffffcc);」でグラデーションを形成します。「linear-gradient」は直線のグラデーションです。上から#ccffffの色が真下に#ffffccの色に変化したグラデーションです。初期値の角度は垂直です。

グラデーションに角度をつける

グラデーションの角度(向き)を変化させるにはいくつかの方法があります。下記はそのサンプルです。

div { background: linear-gradient(to right, #ccffff, #ffffcc);}

対角線上にグラデーションをかけた場合は下記になります。「to bottom right」で右下方向にグラデーションとなります。

div { background: linear-gradient(to bottom right, #ccffff, #ffffcc);}

数値で角度を設定した場合は、角度の単位が「deg」(degreeの略)を用いて設定します。角度の数値を入れると時計回りにグラデーションの方向を変えることができます。

div { background: linear-gradient(45deg, #ccffff, #ffffcc);}

複数の色のグラデーション

上記までの設定は、起点の色から終点の色までの設定です。ここに複数の設定を挟むことで何色ものグラデーションを作ることができます。

div { background: linear-gradient(90deg, red, yellow, blue, orange;}

上記のように色をキーワード(カラーコードまたはカラーネーム)で設定することができます。CSSではこのようにあらかじめ色が準備されています。現在基本色は17色あり詳細は「CSSの色見本帳」をご覧ください。

グラデーションに設定した色の場所(色経由点)を移動してグラデーションの色の波長を変更することもできます。

div { background: linear-gradient(90deg, red, yellow 50%, blue 75%, orange;}

上記の場合、右から左に赤、黄色、青、オレンジの順でグラデーションがかかっていますが、赤から黄色までが左端0%から50%の位置きています。そこから次の青が75%位置になるグラデーションになっています。このように色の場所(色経由点)を任意にずらせることも可能です。

関連記事