【CSS入門】linear-gradientで線形グラデーションを極めよう

この記事ではCSSのlinear-gradientプロパティについて解説します。

linear-gradientとは？

線形のグラデーションを作ります。

グラデーションはbackgroundまたはbackground-imageプロパティにlinear-gradient関数を設定します。下記のように書くと、上(開始色)から下(終了色)へのグラデーションができあがります。

CSS

background: linear-gradient(開始色, 終了色);

linear-gradient詳細

基本的な書き方

以下の場合、上から下へ、白から黒へのグラデーションになります。

HTML

<div class="box"></div>

CSS

.box{
  width: 250px;
  height: 250px;
  background: linear-gradient(white, black);
}

方向を指定する

デフォルトでは上から下へのグラデーションでしたが、次はグラデーションの方向を指定します。

方向を指定する場合は、以下のように書きます。

CSS

background: linear-gradient(to　方向, 開始色, 終了色);

以下の場合、左下から「topのright」へ、つまり右上へのグラデーションになります。

CSS

.box{
  background: linear-gradient(to top right, white, black);
}

角度を指定する

「to　方向」の記述で指定できるのは右下や左下などの45度づつのグラデーションだけなので、細かく角度を指定したい場合は以下のように書きます。

CSS

background: linear-gradient(〇〇deg, 開始色, 終了色);

degとはdegreeの略で、角度を表します。

角度の方向は、下から上へが0degとなり、右へ（90deg）、下へ（180deg）、左（270deg）となります。以下の場合、45度の角度へ、つまり右上へのグラデーションになります。

CSS

.box{
  background: linear-gradient(45deg, white, black);
}

色の位置を指定

色の変わる位置を指定することもできます。

今まで位置を指定してきませんでしたが、開始位置と終了位置は省略することができ、省略した場合開始位置は0、終了位置は100%が初期値として設定されます。

CSS

background: linear-gradient(方向または角度, 開始色 色の地点, 終了色 色の地点);

以下の場合、0（開始位置）〜50%までが白で塗られて、50〜100%（終了位置）までがグラデーションになります。

CSS

.box{
  background: linear-gradient(90deg, white 50%, black);
}

色の複数指定

ここまでは白と黒の2色だけでグラデーションさせてきましたが、3色以上の複数色でもグラデーションさせることができます。

色を足したい場合は、カンマと色と位置(%)を書き足します。

CSS

background: linear-gradient(方向または角度, 開始色 色の地点, 間色 色の地点, 終了色 色の地点);

以下の場合、0（開始位置）〜50%までは白から黒へのグラデーションで、50%から100%（終了位置）までは黒から白へのグラデーションになります。

CSS

.box{
  background: linear-gradient(180deg, black, white 50%, black);
}

まとめ

出番は少ないかもしれませんが、使えるかどうかでWebデザインの幅が広がるので、radial-gradientと共に軽くでもいいので勉強しておきましょう。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。