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 上查看此页面 • 报告此内容的问题