repeating-linear-gradient()

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

繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。

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

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

構文

/* 45度方向に軸を延ばし、青で始め赤で終わり、
   3回繰り返す反復グラデーション */
repeating-linear-gradient(45deg, blue, red 33.3%);

/* 右下から左上に延び、青で始め赤で終わり、
   20px ごとに繰り返す反復グラデーション */
repeating-linear-gradient(to left top, blue, red 20px);

/* 下から上に延び、青で始め、 40% から緑になり、赤で終わる
   グラデーション。最後の色経由点が既定で 100% なので、
   グラデーションは繰り返されない */
repeating-linear-gradient(0deg, blue, green 40%, red);

/* 5回繰り返し、左から右に、赤で始まり、緑に変わり、
   赤に戻るグラデーション */ 
repeating-linear-gradient(to right, red 0%, green 10%, red 20%);

<side-or-corner>
グラデーション線の開始点の位置。指定する場合は、 to に続けて2つ以下のキーワードを指定します。一つは水平方向の辺 (left または right)、もう一方は垂直方向の辺 (top または bottom) です。辺を表すキーワードは順不同です。指定しない場合は、 to bottom が既定になります。
to top, to bottom, to left, to right の値は、 0deg, 180deg, 270deg, 90deg の角度にそれぞれ対応します。他の値は角度に変換されます。
<angle>
グラデーション線の方向を角度で示します。 0deg の値は to top と等価で、値が増加するとそこから時計回りに回ります。
<linear-color-stop>
色経由点の <color> の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った <percentage> または <length> の位置)。 0% のパーセント値または 0 の長さは、グラデーションの先頭を表します。 100% の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。
<color-hint>
color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。

メモ: CSS グラデーションにおける色経由点の描画は、 SVG グラデーションと同じ規則に従います。

形式文法

repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
                            \---------------------------------/ \---------------/
                              Definition of the gradient line   List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  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> ]

縞模様

body {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 20px,
      black 20px,
      black 40px);
  /* 複数の色経由点の位置 */
  background-image: repeating-linear-gradient(-45deg, 
      transparent 0 20px, 
      black 20px 40px);
}

10回繰り返す水平線

body {
  background-image: repeating-linear-gradient(to bottom,
      rgb(26,198,204),
      rgb(26,198,204) 7%,
      rgb(100,100,100) 10%);
}

最後の色経由点が10%であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは10%の高さになり、10本の水平線に相当します。

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

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
repeating-linear-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.
補足 Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
完全対応 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
完全対応 15
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
未対応 11 — 15
接頭辞付き 補足
接頭辞付き -o- のベンダー接頭辞が必要
補足 Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Safari 完全対応 6.1
完全対応 6.1
完全対応 5.1
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in repeating-linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
補足 Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
WebView Android 完全対応 ≤37
完全対応 ≤37
完全対応 ≤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.
完全対応 4
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
補足 Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
完全対応 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- のベンダー接頭辞が必要
補足 Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
未対応 11 — 14
接頭辞付き 補足
接頭辞付き -o- のベンダー接頭辞が必要
補足 Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Safari iOS 完全対応 6.1
完全対応 6.1
完全対応 6
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in repeating-linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
補足 Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Samsung Internet Android 完全対応 1.5
完全対応 1.5
完全対応 1.0
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Double-position color stopsChrome 完全対応 71Edge 未対応 なしFirefox 完全対応 64IE 未対応 なしOpera 完全対応 58Safari 完全対応 12.1WebView Android 完全対応 71Chrome Android 完全対応 71Firefox Android 完全対応 64Opera Android 完全対応 50Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 10.0
Interpolation Hints / Gradient MidpointsChrome 完全対応 40Edge 未対応 なしFirefox 完全対応 36IE 未対応 なしOpera 完全対応 27Safari 完全対応 6.1WebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 36Opera Android 完全対応 ありSafari iOS 完全対応 6.1Samsung Internet Android 完全対応 4.0
to keywordChrome 完全対応 26Edge 完全対応 12Firefox 完全対応 10IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 6.1WebView Android 完全対応 ≤37Chrome Android 完全対応 26Firefox Android 完全対応 10Opera Android 完全対応 ありSafari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.5
Unitless 0 for <angle>Chrome 完全対応 26Edge 完全対応 12Firefox 完全対応 55
完全対応 55
部分対応 46
補足
補足 Accepted only in -webkit-repeating-linear-gradient() and -moz-repeating-linear-gradient(), not repeating-linear-gradient().
IE 未対応 なしOpera 完全対応 16Safari 完全対応 6.1WebView Android 完全対応 ≤37Chrome Android 完全対応 26Firefox Android 完全対応 55
完全対応 55
部分対応 46
補足
補足 Accepted only in -webkit-repeating-linear-gradient() and -moz-repeating-linear-gradient(), not repeating-linear-gradient().
Opera Android 完全対応 ありSafari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.5

凡例

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

関連情報