CSS: 線形グラデーションを指定する liner-gradient()
線形のグラデーションを表現するには、 liner-gradient() 関数を使用します。
使用上、liner-gradient() 関数は画像を扱えるプロパティすべてに使用できることに なっていますが、ブラウザによっては background プロパティと background-color プロパティでしか使用できないので注意してください。
liner-gradient() 関数の書式
linear-gradient(方向, 開始色, 途中色, 終了色)
方向を省略した場合は、「上から下」となります。途中色は省略可能です。
liner-gradient() 使用例
/* 上から下へ、赤から青 */
background: linear-gradient(red, blue);
/* 上から下へ、赤から青 */
background: linear-gradient(to bottom, red, blue);
/* 左から右へ、赤から青 */
background: linear-gradient(to right, red, blue);
/* 上から下へ、赤、黄、青の順番 */
background: linear-gradient(red, yellow, blue);
liner-gradient() 引数の説明
方向
グラデーションの方向は、ボックスの中心点を通る「グラデーションライン」の方向によって決まります。 このグラデーションラインの方向を「キーワード」又は「角度」で指定します。
■ キーワードで指定する場合は次のように指定します。
| キーワード | 方向 |
|---|---|
| to bottom | 上から下 |
| to top | 下から上 |
| to right | 左から右 |
| to left | 右から左 |
キーワードを組み合わせて「to bottom right」のように指定することもできます。 この場合はボックスの大きさによって角度が異なるので注意が必要です。
■ 角度で指定する場合は、単位「deg」で次のようにえ指定します。
| 角度 | 方向 |
|---|---|
| 0deg | 上方向 |
| 90deg | 右方向 |
| 180deg | 下方向 |
| 270deg | 左方向 |
例えば、「180deg」と指定した場合は、グラデーションラインの方向が「下方向」という意味なので、 上から下へのグラデーションとなります。
色
「色の値」、又は「色の値」と「位置」を指定します。
色の値の指定は、RGBや色名で指定します。
CSSでの色の設定の基本について知りたい方は次のページを参考ににしてください。
（CSSの色の指定方法）
位置の指定は「実数値＋単位」または「%値」で指定します。 %値で指定する場合は 0% が開始点で、 100% が終了点です。
「色の値」だけを指定する場合は次のようになります。
background: linear-gradient(red, blue);
「色の値」と「位置」を指定する場合は、間に半角スペースを入れます。
background: linear-gradient(red 0%, blue 100%);
次の指定は、開始点が赤、40%の地点が黄色、終了点が青となります。
background: linear-gradient(red 0%, yellow 40%, blue 100%);
グラデーション サンプル
★ 上から下へのグラデーション
background: linear-gradient(white, gray);
★ 下から上へのグラデーション
background: linear-gradient(to top, white, gray);
★ 左から右へのグラデーション
background: linear-gradient(to right, white, gray);
★ 右から左へのグラデーション
background: linear-gradient(to left, white, gray);