第七章 · 7.2 节

渐变

渐变本质上是一种特殊的图像值，可以用在任何接受 background-image 的地方。CSS 提供三种渐变函数——线性、径向、锥形，分别对应"沿一条直线过渡""从一点向外扩散""围绕一点旋转过渡"三种视觉效果。

linear-gradient：线性渐变

.hero {
  background: linear-gradient(135deg, #8a5a2e, #3f5d54);
}

效果预览：135° 方向

角度或关键字（to right、to bottom left）决定渐变方向；0deg 指向正上方，角度顺时针增加。

radial-gradient：径向渐变

.spotlight {
  background: radial-gradient(circle at 30% 30%, #d3985a, #26233a 70%);
}

效果预览：光晕效果

at 30% 30% 决定圆心位置；不指定形状时默认按容器比例呈椭圆，显式写 circle 则强制正圆。

conic-gradient：锥形渐变

颜色围绕中心点旋转过渡，是绘制饼图、色相环、加载进度环最直接的方式。

.pie {
  background: conic-gradient(#8a5a2e 0 65%, #e7e8e1 0);
  border-radius: 50%;
}

效果预览：65% 进度环

色标位置与硬边渐变

每个颜色后面可以跟一个位置百分比。当相邻两个色标使用相同的位置值时，过渡会瞬间完成，形成清晰的"硬边"，常用来模拟条纹或分段进度条。

.stripes {
  background: linear-gradient(90deg,
    #8a5a2e 0 25%,
    #3f5d54 25% 50%,
    #8a5a2e 50% 75%,
    #3f5d54 75% 100%);
}

效果预览：硬边条纹

叠加多层渐变

background 支持用逗号叠加多个背景图层，渐变与真实图片可以混合使用——常见做法是在图片上叠一层半透明渐变遮罩，保证文字在任意背景图上都清晰可读：

.card-cover {
  background:
    linear-gradient(to top, rgba(0,0,0,.7), transparent 60%),
    url("cover.jpg");
  background-size: cover;
}

文字渐变

把渐变"裁剪"进文字形状内，是标题类视觉效果中常见的技巧，依赖 background-clip: text 与透明文字色配合：

.gradient-text {
  background: linear-gradient(90deg, #8a5a2e, #3f5d54);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

效果预览

Gradient Text

Chapter 7 · Section 7.2

Gradients

A gradient is essentially a special image value that can be used anywhere a background-image is accepted. CSS provides three gradient functions — linear, radial, and conic — corresponding to three visual effects: "transitioning along a straight line", "spreading outward from a point", and "transitioning in rotation around a point".

linear-gradient: Linear Gradients

.hero {
  background: linear-gradient(135deg, #8a5a2e, #3f5d54);
}

Preview: 135° direction

An angle or a keyword (to right, to bottom left) determines the direction of the gradient; 0deg points straight up and angles increase clockwise.

radial-gradient: Radial Gradients

.spotlight {
  background: radial-gradient(circle at 30% 30%, #d3985a, #26233a 70%);
}

Preview: glow effect

at 30% 30% determines the position of the center; when no shape is specified it defaults to an ellipse matching the container's proportions, and writing circle explicitly forces a perfect circle.

conic-gradient: Conic Gradients

Colors transition in rotation around the center point — the most direct way to draw pie charts, hue wheels, and loading progress rings.

.pie {
  background: conic-gradient(#8a5a2e 0 65%, #e7e8e1 0);
  border-radius: 50%;
}

Preview: 65% progress ring

Color Stop Positions and Hard-edge Gradients

Each color can be followed by a position percentage. When two adjacent color stops use the same position value, the transition completes instantly, creating a crisp "hard edge" — commonly used to simulate stripes or segmented progress bars.

.stripes {
  background: linear-gradient(90deg,
    #8a5a2e 0 25%,
    #3f5d54 25% 50%,
    #8a5a2e 50% 75%,
    #3f5d54 75% 100%);
}

Preview: hard-edge stripes

Stacking Multiple Gradient Layers

background supports stacking multiple background layers separated by commas; gradients and real images can be mixed — a common pattern is overlaying a semi-transparent gradient mask on top of an image so that text stays readable on any background image:

.card-cover {
  background:
    linear-gradient(to top, rgba(0,0,0,.7), transparent 60%),
    url("cover.jpg");
  background-size: cover;
}

Gradient Text

Clipping a gradient into the shape of the text is a common technique for heading-level visual effects; it relies on background-clip: text combined with a transparent text color:

.gradient-text {
  background: linear-gradient(90deg, #8a5a2e, #3f5d54);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

Preview

Gradient Text