CSS Reference

repeating-linear-gradient()

線形のグラデーションを繰り返して表示する

repeating-linear-gradient() 関数は、画像のデータ型で値を指定できるプロパティにおいて、線形のグラデーションを繰り返して表示します。

repeating-linear-gradient() 関数の基本的な構文は、linear-gradient() 関数と同じです。

linear-gradient() 関数におけるカラーストップの配置で、各色に終点の位置を指定しなかった場合は全体を指定された色の数で均等に割り振りましたが、repeating-linear-gradient() 関数の場合は、最後の色に、100% 未満の終点の位置の指定がないと繰り返しが行われません。

グラデーションの例

background-image: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);

background-image: repeating-linear-gradient(
  -45deg,
  white 0 20px,
  black 20px 40px
);

background-image: repeating-linear-gradient(
  45deg,
  #fff,
  #fff 5px,
  #1809eb 5px,
  #1809eb 10px
);

主要ブラウザの対応

IE11 ○
Edge（EdgeHTML） ○
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome