CSS 渐变

刀刀

0字

0分钟

2026/8/16

渐变，通过 background-image 设置渐变效果，可以在任何使用 background-image 的容器盒子内使用。

渐变包含以下几种类型：

• 线性渐变 linear-gradient()
• 径向渐变 radial-gradient()
• 锥形渐变 conic-gradient()
• 重复渐变 repeating-linear-gradient() 和 repeating-conic-gradient()

依次详谈这些渐变。

CSS 线性渐变

CSS 线性渐变的语法

<linear-gradient> = linear-gradient( [ [ <angle> | to <side-or-corner> ], ]? <color-stop>[, <color-stop>]+ )

CSS 线性渐变的效果

CSS 线性渐变的基础效果

linear-gradient 线性渐变是一种两个以上颜色之间的平滑过渡效果。线性渐变为某一方向指向的渐变效果，如由左到右，上到下，左上到右下等。和径向渐变不同的是，径向渐变是一中心点向周围扩散的渐变，径向渐变为某一线性指向方向的渐变。

实现最基础的线性渐变效果，只需要指定两个及以上的颜色即可。

基础效果：

div {
  background: linear-gradient(blue, pink);
}

设置了颜色后它会自动计算，均匀分布在渐变路径中。

CSS 线性渐变的方向切换

渐变的角度方向默认从上到下，也可以手动设置调整，允许输入方向单词和角度。方向单词包括以下几种：

• 从上到下：to bottom

  div {
    background: linear-gradient(to bottom, blue, pink);
  }

  

• 从左到右：to right

  div {
    background: linear-gradient(to right, blue, pink);
  }

  

• 从右到左

  div {
    background: linear-gradient(to left, blue, pink);
  }

  

• 从下到上

  div {
    background: linear-gradient(to top, blue, pink);
  }

  

• 从左上到右下

  div {
    background: linear-gradient(to right bottom, blue, pink);
  }

  

• 从右上到左下

  div {
    background: linear-gradient(to left bottom, blue, pink);
  }

  

• 从左下到右上

  div {
    background: linear-gradient(to right top, blue, pink);
  }

  

• 从右下到左上

  div {
    background: linear-gradient(to left top, blue, pink);
  }

  

除了设置对角方向，还能设置角度，0deg 表示从下到上，90deg 表示从左到右。正角度表示顺时针，逆角度表示逆时针。

CSS 线性渐变的色标位置

可以为径向和线性渐变设置 0、1 或 2 个百分比值或者绝对长度值来调整它们的位置。如果将位置设置为百分数，0% 表示起始点，而 100% 表示终点，但是如果需要的话也可以设置这个范围之外的其他值。

如果有些位置你没有明确设置，那么将会自动计算，第一个色标在 0% 处，最后一个色标在 100%，其他的色标则位于其相邻的两个色标中间。

div {
  background: linear-gradient(to left, lime 50px, red 60%, cyan);
}

CSS 线性渐变的硬过渡

不需要平滑过渡，要硬线过渡效果，可以将相邻的颜色停止设置为相同的位置。

div {
  background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}

CSS 线性渐变的过渡中心

默认情况下，渐变会平滑地从一种颜色过渡到另一种颜色，通过设置一个值可以把渐变的中心点移动到指定位置。

div1 {
  background: linear-gradient(blue, 10%, pink);
}
div2 {
  background: linear-gradient(blue, pink);
}

对比效果：

CSS 线性渐变的条纹

要在渐变中包含一个实心、非过渡的颜色区域，请包含色标的两个位置。色标可以有两个位置，这相当于两个连续颜色在不同位置具有相同的色标。颜色将在第一个色标时达到完全饱和，保持该饱和度到第二个色标，并通过相邻色标的第一个位置过渡到相邻色标的颜色。

.multiposition-stops {
  background: linear-gradient(
    to left,
    lime 20%,
    red 30%,
    red 45%,
    cyan 55%,
    cyan 70%,
    yellow 80%
  );
  background: linear-gradient(
    to left,
    lime 20%,
    red 30% 45%,
    cyan 55% 70%,
    yellow 80%
  );
}
.multiposition-stop2 {
  background: linear-gradient(
    to left,
    lime 25%,
    red 25%,
    red 50%,
    cyan 50%,

贡献者

duyidao

刀刀

页面历史

最后编辑于 1 天前

查看完整历史

a5a81ec-prod: full-review skill优化；格式化文档完毕

a5b4d02-prod: 内容优化

a2cb392-prod: 文档元数据更新