什么是颜色渐变，如何用 CSS 实现它

CSS 渐变（css color gradient）是一种完全由浏览器渲染的颜色平滑过渡效果，无需任何图片文件。正因如此，渐变成了前端开发者工具箱中最实用的技术之一。它能减少 HTTP 请求，在任何分辨率下都能完美缩放，而且只需修改一行代码即可更新样式。无论是给按钮添加视觉冲击力、打造全屏 hero 背景，还是为卡片组件增加层次感，深入理解 CSS 渐变的工作原理，都能让你对每一个像素的过渡效果拥有精准的掌控力。

线性渐变详解

线性渐变（linear gradient css）函数沿一条直线绘制颜色过渡效果，基本语法如下：

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

direction 参数控制渐变的方向。你可以使用关键字，例如 to right、to bottom left，也可以使用角度值，例如 135deg。如果不指定方向，默认值为 to bottom（从上到下，即 180 度）。

色标（color stop）让你能够精细地控制渐变效果，每个色标都可以附带一个可选的位置值：

/* 两色渐变，从左到右 */
background-image: linear-gradient(to right, #6a11cb, #2575fc);

/* 三色渐变，显式指定位置 */
background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

为每个色标添加百分比位置，可以创建硬边效果（将两个色标设置在同一位置），或者压缩、拉伸过渡区间。这是实现条纹图案和进度条的基础技巧。在使用颜色值之前，建议先了解 CSS 如何解析不同的颜色格式 - 我们的 HEX 转 RGB 转换指南详细说明了各种格式之间的区别以及各自适用的场景。

径向渐变详解

径向渐变（radial gradient css）从中心点向外辐射，形成椭圆形或圆形的过渡效果。其语法新增了三个可选参数：形状、尺寸和位置。

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

各参数说明如下：

• 形状（shape）：circle 强制生成正圆；ellipse（默认值）会拉伸以适应元素的尺寸。
• 尺寸（size）：可使用关键字，如 closest-side、farthest-corner，或显式长度值，控制渐变延伸的范围。
• 位置（position）：用法与 background-position 完全相同，支持关键字、百分比或像素值。

/* 聚光灯效果 */
background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.3), transparent 60%);

径向渐变非常适合用于聚光灯效果、发光按钮，以及 hero 图片上的柔和暗角叠加。

锥形渐变 - 现代新特性

锥形渐变（conic gradient css）是三种渐变类型中最新的一种，也是最容易被开发者忽略的一种。它不是从中心向外辐射，而是围绕中心点旋转扫描，效果类似色轮或饼图。W3C CSS Images Level 4 规范对锥形渐变有正式定义，目前所有现代浏览器均已支持。

/* 饼图 - 40% 蓝色，60% 珊瑚色 */
background-image: conic-gradient(#4f8ef7 0% 40%, #ff6b6b 40% 100%);

/* 完整色轮 */
background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

你还可以用 from Xdeg 旋转起始角度，用 at X% Y% 移动中心点位置：

background-image: conic-gradient(from 45deg at 60% 50%, #667eea, #764ba2, #667eea);

锥形渐变的实际应用场景包括：纯 CSS 实现的饼图、棋盘格图案，以及动态加载旋转动画。

重复渐变

CSS 提供了 repeating-linear-gradient 和 repeating-radial-gradient，可以在元素上平铺渐变图案，无需手动列出大量色标。关键规则：只有当最后一个色标未到达 100% 时，图案才会重复。

/* 对角条纹 */
background-image: repeating-linear-gradient(
  45deg,
  #f8f9fa,
  #f8f9fa 10px,
  #dee2e6 10px,
  #dee2e6 20px
);

/* 同心圆环 */
background-image: repeating-radial-gradient(
  circle at center,
  #fff 0px,
  #fff 5px,
  #e9ecef 5px,
  #e9ecef 10px
);

重复渐变对性能非常友好，因为浏览器只需根据一段简洁的 CSS 规则就能生成完整的图案，无需下载任何图片资源。

实战示例

渐变按钮

渐变最常见的用途之一是制作视觉冲击力强的行动号召按钮。技巧在于同时设置 background-size 并在悬停时添加过渡动画：

.btn-gradient {
  background-image: linear-gradient(90deg, #6a11cb, #2575fc);
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 12px 28px;
  transition: opacity 0.3s ease;
}
.btn-gradient:hover {
  opacity: 0.85;
}

全屏 hero 背景

在 body 或 hero 区域使用 CSS 背景渐变，能立刻奠定页面的视觉基调：

.hero {
  background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
}

图片深色遮罩

将渐变叠加在图片上，无需额外的遮罩元素，即可保证文字的可读性：

.card-image {
  background-image:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.75) 100%),
    url('photo.jpg');
  background-size: cover;
}

文字渐变

实现文字渐变效果需要三个属性协同配合：

.gradient-text {
  background-image: linear-gradient(90deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

注意，background-clip: text 在部分浏览器中仍需要 -webkit- 前缀，因此务必同时声明两种写法。在编写代码之前，你可以使用 颜色探索工具来预览和验证你的颜色选择。

浏览器兼容性与降级方案

线性渐变和径向渐变自 2013 年起已在所有主流浏览器中获得完整支持。锥形渐变则于 2021 年实现广泛支持（Chrome 69、Firefox 83、Safari 12.1）。根据 Can I Use 的数据，锥形渐变目前已覆盖全球超过 93% 的浏览器用户。

正确的降级方案非常简单：

1. 首先声明一个纯色的 background-color。不支持渐变的浏览器将显示此颜色。
2. 紧接着声明渐变的 background-image 规则。支持渐变的浏览器会将其叠加在上方显示。
3. 对于锥形渐变，在纯色和锥形渐变规则之间额外添加一条 linear-gradient 作为过渡降级方案。

.element {
  background-color: #6a11cb;                        /* 降级方案 */
  background-image: linear-gradient(90deg, #6a11cb, #2575fc); /* 现代浏览器 */
}

完成渐变规则的编写后，建议在部署前使用 CSS 压缩工具去除空白字符，减小文件体积。

在线快速生成 CSS 渐变

熟悉语法后，手写渐变代码其实很快，但如果需要实时预览大量颜色组合，一款在线渐变生成器就能节省大量时间。你不再需要反复刷新浏览器，而是可以直接拖动色标、调整角度，几秒内就能复制最终的 CSS 代码。

如果在构建渐变之前需要转换设计稿中的颜色格式，HEX 转 RGB 转换工具和颜色选择器都是打开渐变生成器之前的好帮手。

即时生成精美的 CSS 渐变效果

免费使用，无需注册，直接在浏览器中运行。支持线性渐变、径向渐变和锥形渐变的实时预览，并可一键复制生成好的 CSS 代码。

立即体验 DevDeck 颜色工具 →

总结

CSS 渐变用纯代码取代了图片资源，带来了与分辨率无关、易于更新、加载迅速的渐变效果。建议从 linear-gradient 入手处理方向性过渡，用 radial-gradient 实现聚光灯和发光效果，遇到饼图或扫描式图案时则尝试 conic-gradient。记得始终添加纯色降级方案，留意文字渐变的浏览器前缀需求，并借助在线工具加速设计迭代。掌握这些基础知识后，你就有能力在整个项目中全面替换静态渐变图片了。