CSSradial-gradient() 関数は、二つ以上の色の連続的な移行が原点から放射状に広がる画像を生成します。形状は円形になったり楕円形になったりします。関数の結果は <gradient> データ型のオブジェクトであり、これは <image> の特殊形です。

他のグラデーションと同様、放射グラデーションは固有の寸法を持ちません。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。

繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに repeating-radial-gradient 関数を使用してください。

<gradient><image> データ型に属するため、 <image> が使用できるところでしか使用できません。このため、 radial-gradient()background-color やその他の <color> データ型を使用するプロパティでは動作しません。

放射グラデーションの構成

放射グラデーションは中心位置最終的な形状、および二つ以上の色停止点で定義されます。

滑らかなグラデーションを生成するために、 radial-gradient() 関数は中央から最終的な形状 (およびその先) に向けて一連の同心円の形状を描きます。最終的な形状は円または楕円です。

色停止点は、中心から右方向に水平に延びる仮想的なグラデーション光の上に配置されます。色停止点の位置を決めるパーセンテージは、最終的な形状とこのグラデーションレイの交点を 100% としたときの相対値です。各形状は単色で、色は交差したグラデーション光の色によって定義されます。

構文

/* コンテナーの中央にあるグラデーション、
   赤で始まり、青へ変わり、緑で終わる */
radial-gradient(circle at center, red 0, blue, green 100%)

キーワード 説明
closest-side グラデーションの形状は、その中心から最も近いグラデーションボックスの辺に (circle の場合)、またはその中心から最も近い縦と横の辺に (ellipse の場合) 内接します。
closest-corner グラデーションの形状は、その中心から最も近いグラデーションボックスの頂点に接します。
farthest-side 形状がその中心から最も遠い辺 (または縦と横の辺) に接することを除いて closest-side と同じです。
farthest-corner グラデーションの形状は、その中心から最も遠いグラデーションボックスの頂点に接します。

メモ: 以前の草案では他のキーワード (covercontain) をそれぞれ標準的な farthest-cornerclosest-side の別名として定義していました。一部の実装は古い二つの変数を外したので、標準的なキーワードだけを使ってください。

<position>
background-positiontransform-origin と同じように扱われる位置。既定値は center です。
<shape>
グラデーションの形状です。 circle (つまり、グラデーションの形状は一定の半径の円) または ellipse (つまり、形状は軸に沿った楕円) のいずれかを指定します。設定されない場合は、既定値は ellipse です。
<extent-keyword>
最終的な形状がとるべき大きさを記述するキーワードです。可能なキーワードは次の通りです。
<color-stop>
この値は <color> 値、続いて省略可能な停止位置 (0% から 100% までの割合、またはグラデーション軸に沿った <length>) で構成されます。 <percentage>0% または <length>0 はグラデーションの中心を表し、値 100% は最終形状と仮想的なグラデーションレイの交点を表します。中間値の <percentage> 値は、グラデーションレイ上の直線上に配置されます。

形式文法

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)
where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
  and <color-stop>     = <color> [ <percentage> | <length> ]? 

シンプルなグラデーション

.radial-gradient {
  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
} 

中央ではないグラデーション

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

メモ: 他の例は CSS グラデーションの使用を参照してください。

仕様書

仕様書 状態 備考
CSS Images Module Level 3
radial-gradients() の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 26
完全対応 26
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 16
補足
完全対応 16
補足
補足 Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
完全対応 3.6
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 10
補足
完全対応 10
補足
補足 Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
Opera 完全対応 12.1
完全対応 12.1
未対応 11.6 — 15
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 6.1
完全対応 6.1
完全対応 5.1
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
WebView Android 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 26
完全対応 26
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 ありFirefox Android 完全対応 16
補足
完全対応 16
補足
補足 Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
完全対応 4
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 12.1
完全対応 12.1
未対応 12 — 14
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
at syntaxChrome 完全対応 26Edge 完全対応 12Firefox 完全対応 16
補足
完全対応 16
補足
補足 Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
完全対応 10
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 10Opera 完全対応 15
完全対応 15
未対応 11.6 — 15
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 16
完全対応 16
完全対応 10
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
Interpolation Hints / Gradient MidpointsChrome 完全対応 40Edge 未対応 なしFirefox 完全対応 36IE 未対応 なしOpera 完全対応 27Safari 完全対応 6.1WebView Android 完全対応 40Chrome Android 完全対応 40Edge Mobile 未対応 なしFirefox Android 完全対応 36Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

Quantum CSS のメモ

Gecko は radial-gradient(circle gold,red) のような放射グラデーションが動きそうで、 circlegold との間にコンマがないので動作しないというバグを持っていました。また、 calc 式が radial-gradient() 関数の半径の部分に使用されると、弾かれて — 値が無効になって — いました (バグ 1376019)。 Firefox の新しいパラレル CSS エンジン (Quantum CSS または Stylo とも呼ばれ、 Firefox 57 でリリース) は、これらのバグを修正しています。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Sebastianz, wizAmit, slayslot, dskmori, ethertank, sosleepy, FredB, Level
最終更新者: mfuji09,