前記事の続きです。
【CSS】グラデーションを使った感触を記録（基本と線形）

放射グラデーション

放射グラデーションは線形グラデーションと似ていますが、中心点から放射状に広がる点が異なります。中心点をどこに置くかは決めることができます。円形や楕円形を作成することもできます。

radial-gradient([option, ]color1, color2)

option = [[(circle) ][(size) ][at (central point)], ]

中心点の指定[at (central point)]

既定はat center centerまたはat 50% 50%

参考画像を載せておきます。白点が中心点です。

.box1{background:radial-gradient(white2px,navy2px,skyblue,navy);}

キーワード

top/bottom/left/right/centerを組み合わせ、９箇所指定

数値（%値、px値）

左上at top leftを(0, 0)座標とし、数値を増やすとと右下at bottom rightへ向かう。

グラデーションサイズの指定[(size) ]

始点は中心点固定ですが、グラデーションの終点をどこに設定するかのオプションです。
4種類用意されています。

画像で見たほうが理解しやすいと思います。
白線は始点と終点で結ばれた線で、この線上のグラデーションを指定してます。
終点を超える範囲は終点の色で埋めます。

closest-sideの時に、中心点がボックスの端（0%/100%）上に指定されているとグラデーションは生じず終点の色で埋められます。

形状[(circle) ]

楕円・正円を指定します。

既定は楕円ですが、ボックスが正方形且つ中心点が対角線上の時は正円が描かれます。
この事から、ボックスの形状と中心点の位置が楕円の形状に影響する事が分ります。

画像を見てもらえばわかりやすいと思います。

一枚目は中心点の指定の参考画像と同じです。（グラデーション部分は全て同じ）
右二つが対角線から外れているのでやや楕円になっています。

ここにボックスを縦に伸ばした画像も載せます。（設定は全て同じ）
正円だったものでも、楕円になっています。

circleを指定することで、常に正円を保ち続けます。

.box{background:radial-gradient(circleat60%25%,white2px,navy2px,skyblue,navy);}

扇形グラデーション

(中心から広がるのではなく) 中心点の周りを回りながら色が変化するグラデーションから成る画像を生成します。

中心点を置き、基準線の角度を決めて、その線を始点に扇を開くように時計回りに360度展開します。

conic-gradient([option, ]color1, color2)

option = [[from (angle) ][at (central point)], ]

中心点の指定[at (central point)]

放射グラデーションと同じです。

基準線の角度[from (angle) ]

中心点から、基準となる線を引く角度を決めます。
既定は0degで、真上に線を引きます。

色経由点の配置

px値での指定が不可、[0-360]degによる角度の指定となります。
基準線から傾いた角度を指定します。

.box3{background:conic-gradient(from180deg,white,navy90deg,khaki);}

参考サイト

CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN