放射グラデーション

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

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

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

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

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

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

box1-default

.box1 {
    background:
        radial-gradient(white 2px, navy 2px, skyblue, navy);
}

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

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

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

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

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

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


ellipse	楕円　既定
circle	正円

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

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

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

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

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

.box {
    background:
        radial-gradient(circle at 60% 25%, white 2px, navy 2px, skyblue, navy);
}

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

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

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

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

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

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

.box3 {
    background:
        conic-gradient(from 180deg, white, navy 90deg, khaki);
}