radial-gradient の読み方

radial-gradient の読み方

HTML用語「radial-gradient 」の読み方を掲載してます。

読み⽅

ラジアルグラディエント。

英訳

radial 放射状。
gradient 勾配。この場合は一般的にグラデーションの意で放射状グラデーション。

radial-gradient とは

円形グラデーションを指定するcssの関数 radial-gradient() です。
二つ以上の色の連続的な移行が原点から放射状に広がる画像を生成します。形状は円形になったり楕円形になったりします。

構文
radial-gradient(形状とサイズ at 中心位置, 開始色, 途中色, 終了色);

色だけで指定することも可能で、その場合適用先の要素の寸法に合わせて生成されます。
複数の放射状グラデーションを透明状で重ねることもできます。
使用例
.sample1 {
background: radial-gradient(white, teal);
}
中心がwhite、終了色がteal の楕円

.sample2 {
background: radial-gradient(at center top, rgb(242, 149, 150), transparent),
radial-gradient(at center bottom, rgb(119, 220, 242), transparent);
}
ピンクの放射グラデーションを上辺に下辺に水色のグラデーションを生成。