CSS 渐变完全指南

什么是 CSS 渐变？

CSS 渐变（Gradient）允许你在两种或多种颜色之间创建平滑的过渡效果。渐变本质上是一种特殊的图像类型（<image>），可以用在任何接受图片值的地方，包括 background、background-image、border-image、mask-image 等属性。

CSS 提供了三种渐变函数：

• linear-gradient() — 线性渐变：沿一条直线方向过渡
• radial-gradient() — 径向渐变：从一个中心点向外扩散
• conic-gradient() — 锥形渐变：围绕中心点旋转过渡

渐变在现代网页设计中应用极为广泛，从按钮背景、卡片装饰到全屏 Hero 区域，几乎无处不在。掌握 CSS 渐变是前端开发者的必备技能。

一、线性渐变 linear-gradient

基本语法

linear-gradient(direction, color-stop1, color-stop2, ...)

• direction：渐变方向，可以是角度值（如 90deg）或关键词（to right、to bottom）
• color-stop：颜色停止点，可以是颜色值，也可以是"颜色 + 位置"（如 red 30%）

方向控制

使用 to 关键词指定方向（渐变终点方向）：

/* 从上到下（默认） */
background: linear-gradient(to bottom, #4361ee, #7209b7);

/* 从左到右 */
background: linear-gradient(to right, #4361ee, #7209b7);

/* 从左上到右下 */
background: linear-gradient(to bottom right, #4361ee, #7209b7);

/* 使用角度：0deg = 向上，90deg = 向右，180deg = 向下 */
background: linear-gradient(45deg, #4361ee, #7209b7);

角度值的含义：0deg 表示渐变方向从下往上，顺时针旋转。45deg 表示从左下到右上，90deg 表示从左到右，180deg 表示从上到下。

多色渐变与色标位置

/* 三色均匀过渡 */
background: linear-gradient(to right, #4361ee, #7209b7, #f72585);

/* 指定色标位置（百分比或像素） */
background: linear-gradient(to right, #4361ee 0%, #7209b7 50%, #f72585 100%);

/* 非均匀分布 */
background: linear-gradient(to right, #4361ee 20%, #7209b7 80%);

当省略色标位置时，浏览器会自动均匀分配各颜色的过渡区间。

创建硬边界（无过渡）

将两个相邻色标设在同一位置，可以创建清晰的分界线：

/* 条纹效果 */
background: linear-gradient(to right, #4361ee 50%, #f72585 50%);

/* 等宽条纹 */
background: linear-gradient(to right,
  #4361ee 0%, #4361ee 25%,
  #7209b7 25%, #7209b7 50%,
  #f72585 50%, #f72585 75%,
  #4cc9f0 75%, #4cc9f0 100%
);

重复线性渐变 repeating-linear-gradient

使用 repeating-linear-gradient 可以自动重复渐变图案：

/* 重复条纹 */
background: repeating-linear-gradient(
  45deg,
  #4361ee,
  #4361ee 10px,
  #e8eaf6 10px,
  #e8eaf6 20px
);

/* 重复渐变（角度渐变纹理） */
background: repeating-linear-gradient(
  90deg,
  #4361ee 0px,
  #7209b7 20px,
  #4361ee 40px
);

二、径向渐变 radial-gradient

基本语法

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

• shape：圆形（circle）或椭圆（ellipse，默认）
• size：渐变半径大小（closest-side、farthest-side、closest-corner、farthest-corner）
• position：中心点位置（默认 center）

基础示例

/* 默认：椭圆，从中心向外扩散 */
background: radial-gradient(#4361ee, #7209b7);

/* 指定为正圆 */
background: radial-gradient(circle, #4361ee, #7209b7);

/* 指定中心位置 */
background: radial-gradient(circle at top left, #4361ee, #7209b7);
background: radial-gradient(circle at 50% 50%, #4361ee, #7209b7);

/* 多色径向渐变 */
background: radial-gradient(circle, #4361ee, #7209b7 50%, #f72585);

尺寸关键词详解

• closest-side：渐变边缘到达最近的容器边时停止
• farthest-side：渐变边缘到达最远的容器边时停止
• closest-corner：渐变边缘到达最近的容器角时停止
• farthest-corner（默认）：渐变边缘到达最远的容器角时停止

background: radial-gradient(circle closest-side at 30% 40%,
  #4361ee, #7209b7, #f72585
);

重复径向渐变 repeating-radial-gradient

/* 同心圆波纹效果 */
background: repeating-radial-gradient(
  circle,
  #4361ee,
  #4361ee 10px,
  #e8eaf6 10px,
  #e8eaf6 20px
);

/* 从中心辐射的渐变纹理 */
background: repeating-radial-gradient(
  circle at center,
  #4361ee 0px,
  #4361ee 8px,
  transparent 8px,
  transparent 16px
);

三、锥形渐变 conic-gradient

基本语法

conic-gradient(from angle at position, color-stop1, color-stop2, ...)

锥形渐变围绕中心点旋转颜色过渡，类似于色轮或饼图效果。起始角度默认为 0deg（12点钟方向），顺时针旋转。

基础示例

/* 基本锥形渐变 */
background: conic-gradient(#4361ee, #7209b7, #f72585, #4cc9f0, #4361ee);

/* 指定起始角度 */
background: conic-gradient(from 45deg, #4361ee, #7209b7, #f72585);

/* 指定色标位置制作饼图 */
background: conic-gradient(
  #4361ee 0% 30%,
  #7209b7 30% 60%,
  #f72585 60% 80%,
  #4cc9f0 80% 100%
);

重复锥形渐变 repeating-conic-gradient

/* 棋盘格效果 */
background: repeating-conic-gradient(
  #4361ee 0% 25%,
  #e8eaf6 25% 50%
);

/* 旋转光束效果 */
background: repeating-conic-gradient(
  from 0deg,
  #4361ee 0deg 10deg,
  transparent 10deg 20deg
);

四、渐变中的透明色

使用 transparent 关键词可以创建渐隐效果：

/* 渐隐遮罩效果 */
background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);

/* 底部渐隐（常用于图片叠加） */
.overlay {
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 100%
  );
}

五、实用渐变案例

玻璃拟态（Glassmorphism）背景

.glass-card {
  background: linear-gradient(
    135deg,
    rgba(67, 97, 238, 0.15),
    rgba(114, 9, 183, 0.15)
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

渐变文字效果

.gradient-text {
  background: linear-gradient(135deg, #4361ee, #7209b7, #f72585);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

渐变边框

.gradient-border {
  background: linear-gradient(white, white) padding-box,
              linear-gradient(135deg, #4361ee, #f72585) border-box;
  border: 2px solid transparent;
  border-radius: 12px;
}

深色主题按钮

.btn-gradient {
  background: linear-gradient(135deg, #4361ee 0%, #7209b7 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(67, 97, 238, 0.6);
}

动画渐变背景

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-bg {
  background: linear-gradient(
    -45deg,
    #4361ee, #7209b7, #f72585, #4cc9f0
  );
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

六、渐变性能与兼容性

性能注意事项

• 渐变本身性能良好，浏览器通过 GPU 加速渲染
• 避免在 animation 中频繁改变渐变颜色值，这会导致重绘开销增大
• 对于动画渐变，推荐使用 background-position 或 background-size 来模拟动画，而不是改变渐变本身
• conic-gradient 在某些浏览器上的渲染性能略低于线性和径向渐变

浏览器兼容性

• linear-gradient：所有现代浏览器全面支持（IE10+）
• radial-gradient：所有现代浏览器支持（IE10+ 部分支持）
• conic-gradient：Chrome 69+、Firefox 83+、Safari 12.1+ 支持
• 旧版 WebKit 浏览器需要 -webkit- 前缀

七、常见问题（FAQ）

渐变方向 to right 和 90deg 有什么区别？

效果相同。to right 等价于 90deg。角度从 0deg（向上）开始顺时针计算：0deg = to top，90deg = to right，180deg = to bottom，270deg = to left。

渐变可以嵌套使用吗？

可以。多个渐变可以用逗号分隔叠加在一起，后声明的渐变覆盖在前面的渐变之上。可以利用 transparent 让底层渐变透过来显示：

background:
  radial-gradient(circle at 20% 30%, rgba(67, 97, 238, 0.3), transparent 50%),
  radial-gradient(circle at 80% 70%, rgba(247, 37, 133, 0.3), transparent 50%),
  linear-gradient(135deg, #1a1a2e, #16213e);

如何在渐变中使用颜色变量？

CSS 自定义属性可以与渐变配合使用，便于主题切换：

:root {
  --color-primary: #4361ee;
  --color-secondary: #7209b7;
}

.gradient-button {
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary)
  );
}

渐变能用在边框上吗？

可以。使用 border-image 或者更推荐的 background-clip 技巧（见上文"渐变边框"示例），可以实现渐变边框效果。

在线 CSS 渐变生成工具

手动编写 CSS 渐变代码虽然不难，但实时预览和微调参数会大幅提高效率。使用我们的 在线 CSS 渐变生成器，可以通过可视化界面实时调整渐变方向、颜色和位置，自动生成可复制的 CSS 代码，所有操作在浏览器本地完成。

总结

CSS 渐变是前端开发中最常用的视觉技术之一。线性渐变适合按钮、横幅等方向性强的场景；径向渐变适合聚光灯、光晕等效果；锥形渐变适合色轮、饼图、棋盘格等旋转性图案。熟练掌握三种渐变的使用方法，能够让你在网页设计中创建出丰富多样的视觉效果。

更多前端工具，欢迎访问 EITools 在线工具箱。