linear-gradient()

linear-gradient() CSS 函数创建一个图像，该图像沿直线由两种或多种颜色之间的渐进过渡组成。其结果是一个 <gradient> 数据类型的对象，这是一种特殊的 <image> 类型。

语法

css

/* A gradient tilted 45 degrees,
   starting blue and finishing red */
linear-gradient(45deg, blue, red)

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

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

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

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

/* Color stop: A gradient going from the bottom to top,
   starting blue, turning green at 40% of its length,
   and finishing red */
linear-gradient(0deg, blue, green 40%, red)

/* Color hint: A gradient going from the left to right,
   starting red, getting to the midpoint color
   10% of the way across the length of the gradient,
   taking the rest of the 90% of the length to change to blue */
linear-gradient(.25turn, red, 10%, blue)

/* Multi-position color stop: A gradient tilted 45 degrees,
   with a red bottom-left half and a blue top-right half,
   with a hard line where the gradient changes from red to blue */
linear-gradient(45deg, red 0 50%, blue 50% 100%)

值

<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>，沿着渐变的轴）。

<color-hint>

一个插值提示，定义渐变如何在相邻颜色停点之间进行。长度定义在两个颜色停点之间渐变颜色应到达颜色过渡中点的哪个位置。如果省略，颜色过渡的中点是两个颜色停点之间的中点。

注意：CSS 渐变中的颜色停点的渲染遵循与 SVG 渐变中的颜色停点相同的规则。

描述

与任何渐变一样，线性渐变具有无内在尺寸；即它没有自然或首选大小，也没有首选比率。它的具体大小将与它应用的元素的大小匹配。

要创建一个重复以填充其容器的线性渐变，请使用 repeating-linear-gradient() 函数。

因为 <gradient> 属于 <image> 数据类型，所以它们只能在可以使用 <image> 的地方使用。因此，linear-gradient() 不适用于 background-color 和使用 <color> 数据类型的其他属性。

线性渐变的构成

线性渐变由一条轴——渐变线——和两个或多个颜色停点定义。轴上的每个点都是一种不同的颜色；为了创建平滑的渐变，linear-gradient() 函数绘制一系列垂直于渐变线的彩色线，每条线都与它与渐变线相交的点的颜色相匹配。

渐变线由包含渐变图像的框的中心和一个角度定义。渐变的颜色由两个或多个点决定：起点、终点以及介于两者之间的可选颜色停点。

起点是渐变线上第一个颜色开始的位置。终点是最后一个颜色结束的位置。这两个点中的每一个都由渐变线与从位于相同象限的框角经过的垂直线的交点定义。终点可以理解为起点的对称点。这些比较复杂的定义会导致一种有趣的效应，有时被称为魔角：最靠近起点和终点的角具有与其相应的起点或终点相同的颜色。

自定义渐变

通过在渐变线上添加更多颜色停点，您可以创建在多种颜色之间的高度自定义过渡。可以使用 <length> 或 <percentage> 显式定义颜色停点的位置。如果您没有指定颜色位置，它将被放置在它之前和它之后的颜色之间的中间位置。以下两个渐变是等效的。

css

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

默认情况下，颜色会从一个颜色停靠点的颜色平滑地过渡到下一个颜色停靠点的颜色，颜色之间的中点是颜色过渡的中点。可以通过在两种颜色之间添加一个未标记的 % 颜色提示来将此中点移动到两种颜色停靠点之间的任何位置，以指示颜色过渡的中点应该在哪里。以下示例从开头到 10% 标记是纯红色，从 90% 到结尾是纯蓝色。在 10% 到 90% 之间，颜色从红色过渡到蓝色，但是过渡的中点在 30% 标记处，而不是没有 30% 颜色提示时的 50%。

css

linear-gradient(red 10%, 30%, blue 90%);

如果两个或多个颜色停靠点位于相同的位置，则过渡将在该位置声明的第一个和最后一个颜色之间形成一条硬线。

颜色停靠点应按升序排列。较低值的后续颜色停靠点将覆盖先前颜色停靠点的值，从而形成硬过渡。以下示例在 40% 标记处从红色变为黄色，然后在 25% 的渐变中从黄色过渡到蓝色。

css

linear-gradient(red 40%, yellow 30%, blue 65%);

允许使用多位置颜色停靠点。可以通过在 CSS 声明中包含两个位置来将一种颜色声明为两个相邻的颜色停靠点。以下三个渐变是等效的。

css

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

默认情况下，如果没有颜色具有 0% 停靠点，则声明的第一个颜色将位于该点。同样，最后一个颜色将继续到 100% 标记，或者如果最后一个停靠点上没有声明长度，则位于 100% 标记。

正式语法

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

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

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

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

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

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

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

示例

45 度角的渐变

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

css

body {
  background: linear-gradient(45deg, red, blue);
}

从渐变线 60% 开始的渐变

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

css

body {
  background: linear-gradient(135deg, orange 60%, cyan);
}

矩形颜色空间中的插值

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

css

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

使用色调插值

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

div {
  height: 50vh;
  color: white;
  font-weight: bolder;
}

在此插值示例中，使用了 hsl 颜色系统，并且正在插值色调。

css

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

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

顶部的框使用较短插值，这意味着颜色使用色轮上的较短弧线直接从红色过渡到蓝色。底部的框使用较长插值，这意味着颜色使用较长的弧线从红色过渡到蓝色，穿过绿色、黄色和橙色。

具有多位置颜色停靠点的渐变

此示例使用多位置颜色停靠点，相邻颜色具有相同的颜色停靠点值，从而创建条纹效果。

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

css

body {
  background: linear-gradient(
    to right,
    red 20%,
    orange 20% 40%,
    yellow 40% 60%,
    green 60% 80%,
    blue 80%
  );
}

规范

规范
CSS 图像模块级别 4 # 线性渐变

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

使用 CSS 渐变
其他渐变函数：repeating-linear-gradient()、radial-gradient()、repeating-radial-gradient()、conic-gradient()、repeating-conic-gradient()
<hue-interpolation-method>
<color-interpolation-method>
<image>
CSS 图像模块