CSS 渐变

Begindev 编辑部 March 25, 2026

与平坦的纯色不同，渐变在两种或多种颜色之间平滑过渡，创造出动态感和精致感。

在本章中，我们将探索 CSS 中的两种主要渐变类型：线性渐变 (Linear Gradients) 和 径向渐变 (Radial Gradients)。

我们将深入研究每种渐变的语法、自定义选项和实际应用，使你能够为网站创建令人惊叹的视觉效果。

1. 线性渐变 (Linear Gradients)

线性渐变是颜色沿着一条直线进行的过渡。你需要定义这条线的方向以及沿线出现的颜色。

1.1 基本语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction: 指定渐变线的方向。

角度: 0deg (从下到上), 90deg (从左到右), 180deg (从上到下), 270deg (从右到左)。
关键字: to top, to bottom (默认), to left, to right, to top left 等。

color-stop: 指定颜色及其过渡的位置。至少需要两个色标。

示例：

.linear-gradient-example {
  background: linear-gradient(to right, red, yellow);
}

这段代码创建了一个从左到右，由红变黄的线性渐变。

1.2 方向变化

使用角度：

.linear-gradient-angle {
  background: linear-gradient(45deg, blue, green);
}

创建一个 45 度角的蓝绿渐变。

使用关键字：

.linear-gradient-keyword {
  background: linear-gradient(to bottom left, purple, orange);
}

从右上角向左下角，由紫色过渡到橙色。

1.3 色标与位置 (Color Stops)

你可以精确指定颜色在渐变中出现的位置，从而更好地控制过渡。

.linear-gradient-positions {
  background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
}

red 0%: 渐变起始于红色。
yellow 50%: 黄色位于渐变的中点。
green 100%: 渐变结束于绿色。

1.4 硬色标 (Hard Stops)

硬色标创建的是清晰的颜色分割线，而不是平滑过渡。通过为两个相邻颜色指定相同的位置来实现。

.linear-gradient-hardstop {
  background: linear-gradient(to right, red 50%, yellow 50%);
}

这将创建一个左半部分是红色，右半部分是黄色的背景，中间有一条清晰的分界线。

1.5 使用 rgba() 和 hsla() 实现透明度

你可以使用 rgba() 或 hsla() 颜色值来创建带有透明度的渐变。这在制作图片叠加层或营造细腻的视觉效果时非常有用。

示例：

.linear-gradient-transparent {
  /* 从完全透明过渡到纯黑色 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); 
}

2. 径向渐变 (Radial Gradients)

径向渐变是从一个中心点向外辐射颜色的。它们常用于创建圆形或椭圆形的亮点和阴影。

2.1 基本语法

background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

shape: 定义形状。可以是 circle (圆形) 或 ellipse (椭圆，默认值)。
size: 决定渐变的大小。

关键字: closest-side, farthest-side, closest-corner, farthest-corner (默认)。
具体数值: 如 50px 或 50%。

at position: 指定渐变的中心点。

关键字: center (默认), top, bottom, left, right。
数值: 如 at 50% 50% 或 at 20px 30px。

示例：

.radial-gradient-example {
  background: radial-gradient(circle, red, yellow);
}

创建一个圆形渐变，从中心的红色过渡到边缘的黄色。

2.2 形状与尺寸变化

圆形 (Circle)：

.radial-gradient-circle {
  background: radial-gradient(circle farthest-corner at center, blue, green);
}

椭圆形状

.radial-gradient-ellipse {
  /* 在左上角创建一个延伸至最近边的椭圆渐变 */
  background: radial-gradient(ellipse closest-side at top left, purple, orange);
}

固定尺寸：

.radial-gradient-size {
  background: radial-gradient(circle 50px at center, red, yellow);
}

创建一个半径固定为 50px 的圆形渐变。

2.3 位置变化

你可以改变渐变中心点的位置。

使用关键字：

.radial-gradient-position-keyword {
  /* 渐变中心位于右上角 */
  background: radial-gradient(circle at top right, red, yellow);
}

使用像素/百分比值：

.radial-gradient-position-pixel {
  /* 渐变中心位于距离左侧 20px、顶部 30px 的位置 */
  background: radial-gradient(circle at 20px 30px, red, yellow);
}

2.4 颜色断点与位置

与线性渐变一样，你可以指定颜色在径向渐变中出现的具体位置。

.radial-gradient-positions {
  /* 中心(0%)是红色 -> 中点(50%)是黄色 -> 边缘(100%)是绿色 */
  background: radial-gradient(circle, red 0%, yellow 50%, green 100%);
}

2.5 多重颜色断点

你可以使用多个颜色断点来创建复杂的径向渐变。

.radial-gradient-multiple {
  /* 多种颜色从中心向外辐射 */
  background: radial-gradient(circle, red, orange, yellow, green, blue);
}

3. 实战示例与演示

3.1 创建带有线性渐变的按钮

渐变可以增加按钮的立体感。

.button {
  background: linear-gradient(to bottom, #4CAF50, #388E3C); /* 绿色渐变 */
  border: none;
  color: white;
  padding: 15px 32px;
  border-radius: 5px;
  cursor: pointer;
}
.button:hover {
  background: linear-gradient(to bottom, #388E3C, #4CAF50); /* 悬停时反转渐变 */
}

3.2 产品聚光灯效果 (径向渐变)

径向渐变可用于突出显示图片的特定区域。

<div class="product-spotlight">
  <img src="product-image.jpg" alt="Product Image">
  <div class="spotlight-overlay"></div>
</div>

.product-spotlight {
  position: relative;
  width: 300px;
  height: 300px;
}

.product-spotlight img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spotlight-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 80%);
}

这个覆盖层中心是透明的，四周逐渐变黑，形成一种聚光灯打在中心的效果。

3.3 透明渐变 (Transparency)

结合 rgba 或 hsla 可以创建透明渐变，常用于图片上的文字遮罩，以提高文字可读性。

.hero-section {
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7)), url('hero.jpg');
}

这会在背景图上覆盖一层从透明到黑色的渐变，通常用于底部的文字说明区域。