repeating-radial-gradient()

CSSrepeating-radial-gradient() 関数は、原点から広がり繰り返すグラデーションから成る画像を生成します。 radial-gradient と似ており、同じ引数を取りますが、 repeating-linear-gradient と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は <gradient> データ型のオブジェクトであり、これは <image> の特殊型です。

それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。

他のグラデーションと同じく、放射反復グラデーションも固有の寸法を持ちません。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

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

構文

/* コンテナーの中央からのグラデーションで、
   赤で始まり、青に変化し、緑で終わり、
   それぞれ 30px ごとに色が繰り返される */
repeating-radial-gradient(circle at center, red 0, blue, green 30px);  

/* 左上の角付近の楕円形のグラデーションで、
   赤で始まり、緑に変化し、また戻り、
   中央と右下の角の間で5回繰り返され、
   中央と左上の角の間は1回だけ */
repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);

<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 の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。

<color-stop>
色経由点の <color> 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの <percentage> または <length>) です。 percentage が 0%、または length が 0 の場合は、グラデーションの中心を表します。 100% は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。

形式文法

repeating-radial-gradient( 
       [[ circle  || <length> ]                     [at <position>]? , | 
        [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
                                                     at <position>   ,    <color-stop-list> )
        \---------------------------------------------------------------/\-----------------/
                  Contour, size and position of the ending shape          List of color stops  
    
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: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}

最も遠い角

.radial-gradient {
  background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%,
      red, black 5%, blue 5%, green 10%);
  background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, 
      red 0 5%, green 5% 10%);
}

楕円のグラデーションは左上から20%の位置が中心となり、中心と最も遠い角 (右下の角) の間で10回繰り返します。色経由で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。

メモ: 他の例は CSS グラデーションの使用 をご覧ください。

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
repeating-radial-gradient()Chrome 完全対応 26
完全対応 26
完全対応 10
接頭辞付き
接頭辞付き -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 完全対応 10Opera 完全対応 12.1
完全対応 12.1
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 12 — 15
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
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 完全対応 4.4
完全対応 4.4
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 26
完全対応 26
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
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.
完全対応 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.
Opera Android 完全対応 12.1
完全対応 12.1
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 12 — 14
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS 完全対応 7
完全対応 7
完全対応 6
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
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
未対応 12 — 15
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari 未対応 なしWebView Android 完全対応 ≤37Chrome Android 完全対応 26Firefox 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.
完全対応 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.
Opera Android 完全対応 14
完全対応 14
未対応 12 — 14
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
Double-position color stopsChrome 完全対応 71Edge 未対応 なしFirefox 完全対応 64IE 未対応 なしOpera 完全対応 58Safari 完全対応 12.1WebView Android 完全対応 71Chrome Android 完全対応 71Firefox Android 完全対応 64Opera Android 完全対応 50Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 あり
Interpolation Hints / Gradient MidpointsChrome 完全対応 40Edge 未対応 なしFirefox 完全対応 36IE 未対応 なしOpera 完全対応 27Safari 完全対応 6.1WebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 46Opera Android 完全対応 ありSafari iOS 完全対応 7Samsung Internet Android 完全対応 あり

凡例

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

関連情報