linear-gradient 関数
linear-gradient 関数は線形グラデーションを指定します。
背景画像を設定するプロパティ：background、
background-image、
またはボーダー画像を設定するプロパティ：border-image、
background-image-source に適用されます。
構文
セレクタ {
background: linear-gradient([角度または方向], 色1 サイズ1, 色2 サイズ2...);
}
値
| 値 | 説明 |
|---|---|
| 方向 |
任意の角度単位でグラデーションの方向を指定するか、
キーワード top、left、right、bottom、
またはそれらの組み合わせ：top left、top right などで指定します。
単語の順序は重要ではありません：top left と left top に違いはありません。
このパラメータは省略可能です：指定しない場合、グラデーションは上から下になります（to top を指定した場合と同じ）。
方向の前には to という単語を置きます。
|
| 角度 | 任意の角度単位での角度。 正の値でも負の値でも構いません。 このパラメータは省略可能です。角度と方向の両方を同時に指定することはできず、どちらか一方（または何も）を指定します。 |
| 色1 | グラデーションの開始色。任意の色の単位で指定します。 |
| 色2 | グラデーションの終了色。任意の色の単位で指定します。 |
| サイズ | グラデーションの特定の色の範囲を、 任意のサイズ単位で指定します。 |
例 . 最もシンプルな例
構文：
セレクタ {
background: linear-gradient(開始色, 終了色);
}
例を見てみましょう：
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
例 . 角度を追加
構文：
セレクタ {
background: linear-gradient(角度, 開始色, 終了色);
}
例を見てみましょう：
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
例 . 方向を追加
角度の代わりに方向
top、left、right、bottom、
またはそれらの組み合わせ：top left、top right を追加できます。
方向の前には to という単語を置きます。
構文：
セレクタ {
background: linear-gradient(方向, 開始色, 終了色);
}
例を見てみましょう：
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
例 . 方向を追加
別の方向を指定してみましょう：
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
例 . サイズを追加
構文：
セレクタ {
background: linear-gradient(色1 サイズ1, 色2 サイズ2);
}
次の例の動作は次の通りです：
純粋な赤色は 0px から 30px まで、
30px から 50px までは赤から青へのグラデーション、
そして 50px から最後までは純粋な青色になります：
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
例 . 2 色以上を追加
構文：
セレクタ {
background: linear-gradient(色1 サイズ1, 色2 サイズ2, 色3 サイズ3...);
}
次の例の動作は次の通りです：
純粋な赤色は 0px から 30px まで、
30px から 50px までは赤から青へのグラデーション、
50px から 70px までは青から緑へのグラデーション、
そして 70px 以降は純粋な緑色になります：
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
例 . 急な変化
次の例の動作は次の通りです：
純粋な赤色は 0px から 30px まで、
純粋な青色は 30px から 60px まで、
純粋な緑色は 60px 以降になります
（red 0px は書かなくても構いません）：
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
例 . サイズはパーセントでも指定可能
次の例の動作は次の通りです：
純粋な赤色は 0% から 30% まで、
純粋な青色は 30% から 60% まで、
純粋な緑色は 60% 以降になります
（red 0% は書かなくても構いません）：
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
例 . background-size との組み合わせ
次の例の動作は次の通りです：
純粋な赤色は 0px から 30px まで、
純粋な青色は 30px から 60px まで、
そしてこれら全てが 60px ごとの小さなブロックで繰り返されます
（background-size: 60px; によるものです）：
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
関連項目
-
放射状グラデーションを作成する関数
radial-gradient
-
繰り返し線形グラデーションを作成する関数
repeating-linear-gradient
-
繰り返し放射状グラデーションを作成する関数
repeating-radial-gradient
