radial-gradient 関数
関数 radial-gradient は放射状グラデーションを設定します。
この関数は、背景画像を設定するプロパティ：background、
background-image
またはボーダー画像を設定するプロパティ：border-image、
background-image-source
に適用されます。
構文
セレクタ {
background: radial-gradient([形状 タイプ 位置], 色1 サイズ1, 色2 サイズ2...);
}
値
| 値 | 説明 |
|---|---|
| 形状 |
取り得る値：
ellipse 楕円グラデーション（デフォルト）、
circle 円グラデーション。
|
| タイプ |
グラデーションの伸び方を指定します。
取り得る値：
closest-side, closest-corner,
farthest-side, farthest-corner。
|
| 位置 |
キーワード at の後に、
サイズの単位で任意の位置、
またはキーワード top, bottom,
left, right, center
を様々な組み合わせで指定します。
|
| 色1 | グラデーションの開始色。色の単位で任意の色を指定します。 |
| 色2 | グラデーションの終了色。色の単位で任意の色を指定します。 |
| サイズ | グラデーションの特定の色の範囲を、 サイズの単位で指定します。 |
タイプの値
| 値 | 説明 |
|---|---|
closest-side |
グラデーションの形状は、ブロックの最も近い辺と一致します。 |
closest-corner |
グラデーションの形状は、ブロックの最も近い角までの距離に基づいて計算されます。 |
farthest-side |
グラデーションはブロックの最も遠い辺まで広がります。 |
farthest-corner |
グラデーションの形状は、ブロックの最も遠い角までの距離に基づいて計算されます。 |
備考
タイプと形状は順序を入れ替えることができますが、位置は最初のパラメータの最後に来る必要があります。 グラデーションのタイプとサイズは互いに機能しません（当然です、競合するためです）。 サイズが優先されます。
例 . 最もシンプルな例
開始色と終了色を単純に指定してみましょう：
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
例 . 位置を追加
中心の位置を指定してみましょう：
30px - 左からのオフセット、100px - 上からのオフセット：
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
例 . パーセントでの位置
中心の位置をパーセントで指定してみましょう：
30% - 左からのオフセット、50% - 上からのオフセット：
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
例 . キーワードでの位置
キーワード
top, bottom, left,
right, center を様々な
組み合わせで使用できます。例えば、右中央にグラデーションを配置してみましょう：
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
例 . グラデーションのサイズ
この場合、グラデーションは以下のように機能します：
0px から 20px までは純粋な
赤色、20px から 60px までは赤から青へのグラデーション、
60px 以降は純粋な青色：
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
例 . 複数の色を連続して指定
この場合、グラデーションは以下のように機能します：
0px から 20px までは純粋な
赤色、20px から 40px
までは純粋な青色、40px
から 60px までは青から緑へのグラデーション、
60px 以降は純粋な緑色：
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
例 . サイズ + 位置
異なる色のサイズとグラデーションの中心位置を同時に指定してみましょう：
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
例 . グラデーションの形状
グラデーションの形状は最初のパラメータで指定され、
2 つの値を受け取ります：circle
(円グラデーション) または ellipse (楕円グラデーション、
デフォルト)。なぜこれまで楕円グラデーションを見なかったのでしょうか？
デフォルトで設定されているのに。それは、これまでのブロックの形状が正方形だったからです。
形状を長方形に変更すると、楕円グラデーションが見えます：
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
例 . 円グラデーション
長方形のブロックで円グラデーションを作成してみましょう。
そのためには、最初のパラメータでキーワード
circle を使用してグラデーションの形状を指定します：
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
例 . 位置を追加
前のコードにグラデーションの位置も追加してみましょう：
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
例 . タイプ farthest-corner + circle
グラデーションの形状は、ブロックの最も遠い角までの距離に基づいて計算されます：
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
例 . タイプ farthest-corner + ellipse
グラデーションの形状は、ブロックの最も遠い角までの距離に基づいて計算されます：
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
例 . タイプ farthest-side + circle
グラデーションはブロックの最も遠い辺まで広がります：
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
例 . タイプ farthest-side + ellipse
グラデーションはブロックの最も遠い辺まで広がります：
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
例 . タイプ closest-corner + circle
グラデーションの形状は、ブロックの最も近い角までの距離に基づいて計算されます：
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
例 . タイプ closest-corner + ellipse
グラデーションの形状は、ブロックの最も近い角までの距離に基づいて計算されます：
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
例 . タイプ closest-side + circle
グラデーションの形状は、ブロックの最も近い辺と一致します：
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
例 . タイプ closest-side + ellipse
グラデーションの形状は、ブロックの最も近い辺と一致します：
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
関連項目
-
線形グラデーションを作成する関数
linear-gradient,
-
繰り返し線形グラデーションを作成する関数
repeating-linear-gradient,
-
繰り返し放射状グラデーションを作成する関数
repeating-radial-gradient,
