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

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

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

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

構文

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

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

/* 下から上に延び、青で始め、
   40% から緑になり、赤で終わるグラデーションの繰り返し */
repeating-linear-gradient(0deg, blue, green 40%, red);

<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 と等価で、値が増加するとそこから時計回りに回ります。
<color-stop>
色経由点の <color> の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った <percentage> または <length> の位置)。

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

形式文法

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

where <side-or-corner> = [left | right] || [top | bottom]
   and <color-stop>     = <color> [ <percentage> | <length> ]?

Zebra stripes

body {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 20px,
      black 20px,
      black 40px);
}

Repeating horizontal bars

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

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

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応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
未対応 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.
完全対応 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.
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 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -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.
補足 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 完全対応 あり
完全対応 あり
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
to keywordChrome 完全対応 26Edge 完全対応 12Firefox 完全対応 10IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 6.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 10Opera 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 完全対応 あり
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 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 55
完全対応 55
部分対応 46
補足
補足 Accepted only in -webkit-repeating-linear-gradient() and -moz-repeating-linear-gradient(), not repeating-linear-gradient().
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

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

関連情報

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

このページの貢献者: mfuji09, Sebastianz, Prinz_Rana, wizAmit, prayash, ethertank, sosleepy
最終更新者: mfuji09,