Help us test MDN's new front-end: https://discourse.mozilla.org/t/help-us-test-mdns-new-react-front-end-beta/42593

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%)

<position>
グラデーションの位置で、 background-positiontransform-origin と同じ方法で解釈されます。指定されなかった場合、既定値は center です。
<shape>
グラデーションの形状です。値は circle (つまり、グラデーションの形状が一定の半径の円) か ellipse (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は ellipse です。
<extent-keyword>
終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。
キーワード 説明
closest-side グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。
closest-corner グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。
farthest-side closest-side と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。
farthest-corner 既定値で、グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。

メモ: この関数の初期の実装では、他のキーワード (cover および contain) をそれぞれ標準の farthest-corner および closest-side の別名として含めていました。実装によってはすでに古い形を外しているので、標準のキーワードのみを使用してください。

<linear-color-stop>
色経由点の <color> 値と、それに続く1つまたは2つの省略可能な経由位置 (グラデーション軸沿いの <percentage> または <length>) です。 percentage が 0%、または length が 0 の場合は、グラデーションの中心を表します。 100% は終端の形状と仮想グラデーションレイの交点を表します。その間のパーセント値はグラデーションレイにおける直線的な位置です。
<color-hint>
color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。

形式文法

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ] [at <position> ]? , |
    at <position> ,
  ]?
  <color-stop-list> [ , <color-stop-list> ]+
)
where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
   and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
   and <linear-color-stop> = <color> [ <color-stop-length> ]? 
   and <color-stop-length> = [ <percentage> | <length> ]{1,2}
   and <color-hint> = [ <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
radial-gradient()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 完全対応 14
完全対応 14
未対応 12 — 14
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
Double-position color stopsChrome 完全対応 71Edge 未対応 なしFirefox 完全対応 64IE 未対応 なしOpera 完全対応 58Safari ?
補足
?
補足
補足 In Safari Technology Preview Release 66
WebView Android 完全対応 71Chrome Android 完全対応 71Edge Mobile 未対応 なしFirefox Android 完全対応 64Opera Android 完全対応 50Safari iOS ?
補足
?
補足
補足 In Safari Technology Preview Release 66
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 でリリース) は、これらのバグを修正しています。

関連情報

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

最終更新者: mdnwebdocs-bot,