背景
radial-gradient()
radial-gradient() は、中心から外側へ円や楕円の形に色が広がるグラデーション画像を作る関数です。background や background-image など、画像を受け取るプロパティに指定します。
構文radial-gradient( …
radial-gradient(
[ <radial-shape> || <radial-size> ]? [ at <position> ]? ,
<color-stop-list>
)
<radial-shape> = circle | ellipse
<radial-size> = <radial-extent>
| <length [0,∞]> | <length-percentage [0,∞]>{2}
<radial-extent> = closest-corner | closest-side
| farthest-corner | farthest-sideプレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background: radial-gradient(
circle at 30% 30%,
#88d1c7,
#77a7d7 50%,
#eaac3a
);
}コントロール
radial-gradient()
repeating-
radial-shapecircle
radial-sizefarthest-corner
at <position>30% 30%
四角の中をクリック・ドラッグして中心を動かせます
横の位置
縦の位置
color-stop-list
マーカーをドラッグして位置を動かせます
#88d1c7
色
位置
#77a7d7 50%
カラーヒント（前の色との中間点）
色
位置
2 つ目の位置
#eaac3a
カラーヒント（前の色との中間点）
色
位置
解説
形とサイズ
- 形は
circle（円）かellipse（楕円）です。省略すると、サイズの書き方から決まります（長さ 1 つなら円、2 つなら楕円、それ以外は楕円）。 - サイズは、色の並びの
100%が届く位置を決めます。キーワードは中心から最も近い / 遠い「辺」か「角」までの距離です。省略するとfarthest-corner（いちばん遠い角まで）になります。 - 長さで書くとき、円は半径を 1 つだけ書き、
%は使えません。楕円は横・縦の 半径を 2 つ書き、%は要素の幅・高さに対する割合になります。
中心の位置
at のあとに background-position と同じ書き方で中心を指定します。省略すると center です。中心を端に寄せると、closest-side のような「近い方」のキーワードでは円が小さくなり、farthest-corner では大きくなります。コントロールの四角の中をドラッグして確かめられます。
色の位置
0%が中心、100%がサイズで決めた円（楕円）の縁です。その外側は最後の色で塗られます。- 位置の省略・2 つの位置・カラーヒントの書き方は
linear-gradient()と同じです。前の色より小さい位置を書くと、境目のくっきりした輪になります。
repeating-radial-gradient()
最初の色から最後の色までを繰り返して、同心円の模様を作ります。たとえば repeating-radial-gradient(circle, #88d1c7 0 10px, #77a7d7 10px 20px) は 10px 幅の縞の輪になります。