備忘録的プログラミングリファレンス

radial-gradient()関数

 radial-gradient()関数は、2色以上のある地点を中心にした放射状のグラデーションを生成する関数です。<gradient>データ型であり、<image>データ型の派生です。

 radial-gradient()関数は<image>データ型に属します。そのために<image>データ型が使用できるプロパティのみで使えます。

背景色を、赤色を0%~30%の範囲まで、黄色を70%~100%の範囲にし、30%~70%は赤色から黄色のグラデーション
background-image: radial-gradient(red 0% 30%, yellow 70% 100%);

構文(Syntax)

CSS

radial-gradient(circle at center, color end1, color end2,...)

DOM(JavaScript)

値の取得
(red, yellow)
値の設定
(red 0% 30%, yellow 70% 100%)

Example