repeating-linear-gradient()

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

repeating-linear-gradient() CSS 函式建立一個由重複線性漸變組成的影像。它類似於 linear-gradient() 並接受相同的引數，但它會向所有方向無限重複顏色停止點，以覆蓋其整個容器。該函式的結果是 <gradient> 資料型別的一個物件，它是一種特殊的 <image>。

試一試

background: repeating-linear-gradient(
  #e66465,
  #e66465 20px,
  #9198e5 20px,
  #9198e5 25px
);

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

background:
  repeating-linear-gradient(transparent, #4d9f0c 40px),
  repeating-linear-gradient(0.25turn, transparent, #3f87a6 20px);

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-height: 100%;
}

重複漸變的長度是第一個和最後一個顏色停止點之間的距離。如果第一個顏色沒有顏色停止長度，則顏色停止長度預設為 0。每次重複時，顏色停止點的位置都會按基本線性漸變長度的倍數進行偏移。因此，每個結束顏色停止點的位置與起始顏色停止點重合；如果顏色值不同，這將導致急劇的視覺過渡。這可以透過將第一個顏色再次重複作為最後一個顏色來改變。

與任何漸變一樣，重複線性漸變沒有固有尺寸；即，它沒有自然或首選尺寸，也沒有首選比例。它的具體尺寸將匹配它所應用於的元素的尺寸。

由於 <gradient> 屬於 <image> 資料型別，因此它們只能在可以使用 <image> 的地方使用。因此，repeating-linear-gradient() 不適用於 background-color 和其他使用 <color> 資料型別的屬性。

語法

css

/* A repeating gradient tilted 45 degrees,
   starting blue and finishing red, repeating 3 times */
repeating-linear-gradient(45deg, blue, red 33.3%)

/* A repeating gradient going from the bottom right to the top left,
   starting blue and finishing red, repeating every 20px */
repeating-linear-gradient(to left top, blue, red 20px)

/* A gradient going from the bottom to top,
   starting blue, turning green after 40%,
   and finishing red. This gradient doesn't repeat because
   the last color stop defaults to 100% */
repeating-linear-gradient(0deg, blue, green 40%, red)

/* A gradient repeating five times, going from the left to right,
   starting red, turning green, and back to red */
repeating-linear-gradient(to right, red 0%, green 10%, red 20%)

/* Interpolation in rectangular color space */
repeating-linear-gradient(in oklab, blue, red 50px)

/* Interpolation in polar color space */
repeating-linear-gradient(in hsl, blue, red 50px)

/* Interpolation in polar color space
  with longer hue interpolation method */
repeating-linear-gradient(in hsl longer hue, blue, red 50px)

值

<side-or-corner>

漸變線起點的位置。如果指定，它由單詞 to 和最多兩個關鍵字組成：一個表示水平方向（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>

顏色提示是定義漸變在相鄰顏色停止點之間如何演變的插值提示。長度定義了在兩個顏色停止點之間，漸變顏色應該達到顏色過渡中點的位置。如果省略，顏色過渡的中點是兩個顏色停止點之間的中點。

注意：重複線性漸變中的顏色停止點的渲染遵循與線性漸變中的顏色停止點相同的規則。

正式語法

<repeating-linear-gradient()> = 
  repeating-linear-gradient( [ <linear-gradient-syntax> ] )  

<linear-gradient-syntax> = 
  [ [ <angle> | <zero> | to <side-or-corner> ] || <color-interpolation-method> ]? , <color-stop-list>  

<side-or-corner> = 
  [ left | right ]  ||
  [ top | bottom ]  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?  

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

<linear-color-stop> = 
  <color> <color-stop-length>?  

<linear-color-hint> = 
  <length-percentage>  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

<color-stop-length> = 
  <length-percentage>{1,2}  

<length-percentage> = 
  <length>      |
  <percentage>

示例

斑馬條紋

body {
  width: 100vw;
  height: 100vh;
}

css

body {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    black 20px,
    black 40px
  );
  /* with multiple color stop lengths */
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    black 20px 40px
  );
}

十個重複的水平條

body {
  width: 100vw;
  height: 100vh;
}

css

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 個水平條。

矩形顏色空間中的插值

body {
  width: 100vw;
  height: 100vh;
}

css

body {
  background: repeating-linear-gradient(90deg in oklab, blue, red 100px);
}

色相插值

<div class="shorter">shorter hue</div>
<div class="longer">longer hue</div>

div {
  height: 50vh;
  color: #333300;
  font-weight: bolder;
  padding-left: 1.5rem;
}

在這個插值示例中，使用了 hsl 顏色系統，並對色相進行了插值。

css

.shorter {
  background: repeating-linear-gradient(
    90deg in hsl shorter hue,
    red,
    blue 300px
  );
}

.longer {
  background: repeating-linear-gradient(
    90deg in hsl longer hue,
    red,
    blue 300px
  );
}

上面的框使用較短插值，這意味著顏色使用色輪上較短的弧線從紅色變為藍色。下面的框使用較長插值，這意味著顏色使用較長的弧線從紅色變為藍色，穿過綠色、黃色和橙色。

注意：請參閱使用 CSS 漸變以獲取更多示例。

規範

規範
CSS 影像模組第三級 # repeating-gradients

瀏覽器相容性

另見

使用 CSS 漸變
其他漸變函式：linear-gradient()、radial-gradient()、repeating-radial-gradient()、conic-gradient()、repeating-conic-gradient()
<hue-interpolation-method>
<color-interpolation-method>
<image>
image()
element()
image-set()
cross-fade()

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025 年 10 月 10 日，由 MDN 貢獻者完成。

在 GitHub 上檢視此頁面 • 報告此內容的問題