CSS Reference

radial-gradient()

円形のグラデーションを表す

radial-gradient() 関数は、画像のデータ型で値を指定できるプロパティにおいて、円形のグラデーションを表します。

円形グラデーションを繰り返して表示したい場合は、repeating-radial-gradient() 関数を使用します。

radial-gradient() 関数の基本的な構文は以下の通りです。

radial-gradient() = radial-gradient(
  [ [ [ <rg-ending-shape> || <rg-size> ]? [ at <position> ]? ] || <color-interpolation-method>]? ,
  <color-stop-list>
)

<rg-ending-shape>

グラデーションの形状を指定します。指定できる値は下記の通りです。

circle 正円のグラデーションを表します。
ellipse 楕円のグラデーションを表します（初期値）。

<rg-size>

グラデーションのサイズを指定します。

closest-side 円の中心から領域のもっとも近い辺に内接するサイズになります。
farthest-side 円の中心から領域のもっとも遠い辺に内接するサイズになります。
closest-corner 円の中心から領域のもっとも近い頂点に接するサイズになります。
farthest-corner 円の中心から領域のもっとも遠い頂点に接するサイズになります。
<length> 値 形状が circle の場合は半径、ellipse の場合は水平・垂直方向の半径を空白文字で区切って、<length> 値で指定します。
<percentage> 値 形状が circle の場合は半径、ellipse の場合は水平・垂直方向の半径を空白文字で区切って、<percentage> 値で指定します。値は親ボックスの幅と高さに対する割合となります。

<position>

グラデーションの中心位置を指定します。at に続けて center、top、left、bottom、right のキーワード値、もしくはその組み合わせ、あるいは <length> 値や <percentage> 値を指定します。省略された場合、center として扱われます。

カラーストップの配置（Placing Color Stops）

<color> データ型の値でグラデーションの色をカンマ（,）区切りで指定します。色と角度を空白文字で区切ってセットで指定することもできます。この場合、どの角度でどの色に変化するか、指定することができます。

色のみを指定し、角度を省略した場合は、色の数に合わせて均一に変化します。

グラデーションの例

background-image: radial-gradient(
  farthest-corner at 40px 40px,
  #f35 0%,
  #43e 100%
);

background-image: radial-gradient(50px 50px at 20px 30px, #f00, #ff0, #1809eb);

background-image: radial-gradient(circle, yellow, blue);

主要ブラウザの対応

IE11 ○
Edge（EdgeHTML） ○
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome