工具盒子

CSS 渐变指南：linear/radial/conic-gradient 与颜色停止点

#CSS#渐变#linear-gradient#radial-gradient#conic-gradient#圆锥渐变#饼图#色轮#前端设计#工具矩阵

CSS 渐变基础：三种渐变类型

CSS 渐变是一种特殊的图像类型（<image>），由浏览器按规则实时绘制，无需额外的网络请求加载图片文件。CSS 提供三种核心渐变类型：

  • 线性渐变（linear-gradient）：颜色沿一条直线方向过渡，适合表现方向性的光照、天空、条纹效果
  • 径向渐变（radial-gradient）：颜色从中心点向外辐射扩散，适合表现光源、光晕、聚光灯效果
  • 圆锥渐变（conic-gradient）：颜色围绕中心点旋转过渡，适合表现饼图、色轮、进度环等环形图案
/* 线性渐变：从左到右，红色到蓝色 */
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);

/* 径向渐变：从中心向外，白色到黑色 */
background: radial-gradient(circle at 50% 50%, #ffffff 0%, #000000 100%);

/* 圆锥渐变：从 12 点方向顺时针，红色到蓝色 */
background: conic-gradient(from 0deg at 50% 50%, #ff0000 0%, #0000ff 100%);

配套工具：CSS 渐变生成器

渐变角度的计算规则

linear-gradient 的角度以正上方为 0°，顺时针递增。角度表示渐变线的方向——即颜色过渡的轴线方向：

角度方向颜色过渡
0°↑ 向上从下到上
90°→ 向右从左到右
180°↓ 向下从上到下
270°← 向左从右到左
45°↗ 右上从左下到右上

除了角度值，也可用关键字 to top、to right、to bottom、to left 或组合 to top right（对角方向）。关键字与角度的对应关系：to top = 0°、to right = 90°、to bottom = 180°。

关键理解：0° 并非”从上到下”，而是”渐变线指向上方”，因此颜色从底部（起点）过渡到顶部（终点）。这是初学者常犯的方向混淆。

颜色停止点与多色渐变

颜色停止点（color stop）定义渐变中某个位置的颜色，由颜色值与位置百分比组成：

/* 三色渐变：红 -> 黄 -> 蓝 */
linear-gradient(90deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%);

停止点的位置百分比范围为 0%-100%，多个停止点按位置排序后生成渐变。两个相邻停止点之间，浏览器自动做颜色插值过渡。关键规则：

  1. 位置可不按顺序书写：浏览器会自动按位置值排序。但为了可读性，建议按升序书写。
  2. 位置可省略：若省略位置，浏览器均匀分布。如 linear-gradient(90deg, red, yellow, blue) 三色均匀分布。
  3. 位置可超出相邻范围：如 linear-gradient(90deg, red 10%, blue 10%) 产生硬边界（见下文）。
  4. 最少 2 个停止点：少于 2 个停止点的渐变无意义，浏览器会降级为纯色。

本工具支持任意数量的停止点，可自由增删与调节位置，实时预览多色渐变效果。

径向渐变的形状与中心位置

径向渐变从中心点向外辐射，语法为 radial-gradient(<shape> at <position>, <stops>)：

/* 圆形径向渐变，中心在 30% 70% 位置 */
radial-gradient(circle at 30% 70%, #ffffff 0%, #000000 100%);

形状：circle（圆形）或 ellipse（椭圆，默认）。圆形渐变的辐射半径各方向相等，椭圆渐变则根据元素宽高比自适应拉伸。

中心位置：用 at x% y% 指定，0% 0% 为左上角、50% 50% 为正中心、100% 100% 为右下角。中心位置决定渐变辐射的起点，配合预览区可直观看到效果变化。

大小关键字（可选）：closest-side（到最近边）、farthest-side（到最远边）、closest-corner（到最近角）、farthest-corner（到最远角，默认）。这些关键字控制渐变的辐射范围，适用于需要精确控制渐变边界的场景。

圆锥渐变与环形图案

圆锥渐变（conic-gradient）是 CSS 渐变家族的第三种类型，颜色围绕中心点旋转过渡，而非沿直线或向外辐射。语法为 conic-gradient(from <angle> at <position>, <stops>)：

/* 从 12 点方向顺时针，红色到蓝色绕一圈 */
conic-gradient(from 0deg at 50% 50%, #ff0000 0%, #0000ff 100%);

from 角度：指定渐变的起始方向，以正上方为 0°，顺时针递增。from 0deg 表示从 12 点钟方向开始，from 90deg 表示从 3 点钟方向开始。这与 linear-gradient 的角度语义不同——linear 的角度是渐变线方向，conic 的 from 是起始方向。

at 位置：指定圆锥渐变的中心点，语法与径向渐变一致，用 at x% y% 表示。中心点决定旋转轴心，偏移中心可创造偏心圆锥效果。

停止点位置：0%-100% 对应 0°-360°，即完整一圈。#ff0000 0% 表示起始方向为红色，#0000ff 100% 表示绕一圈后回到起始方向为蓝色。

饼图实现

利用硬边界（相邻停止点位置相同），让颜色在指定角度”跳变”即可实现饼图：

/* 四等分饼图：红黄绿蓝各占 25% */
conic-gradient(
  #ef4444 0% 25%,
  #f59e0b 25% 50%,
  #10b981 50% 75%,
  #3b82f6 75% 100%
);

简写语法 color 0% 25% 等价于 color 0%, color 25%，浏览器自动在相同位置创建硬边界。配合 border-radius: 50% 裁剪为圆形即可得到标准饼图。

进度环实现

用 transparent 透明停止点表示未完成部分，配合圆形裁剪实现进度环：

/* 65% 进度环 */
.conic-progress {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#2b6cff 0% 65%, transparent 65% 100%);
}

进度环是 conic-gradient 最经典的应用场景，相比 SVG 或 Canvas 实现更简洁，且支持 CSS 动画（通过 --progress 自定义属性配合 @property 注册实现平滑过渡）。

色轮实现

将色相均匀分布在 0°-360° 即可生成色轮：

conic-gradient(
  #ff0000 0%,
  #ffff00 16.66%,
  #00ff00 33.33%,
  #00ffff 50%,
  #0000ff 66.66%,
  #ff00ff 83.33%,
  #ff0000 100%
);

六个主色相（红黄绿青蓝紫）均匀分布，首尾都是红色形成闭环，呈现完整的色相轮。

repeating-conic-gradient

repeating-conic-gradient 会将停止点模式重复填充整个 360°，适合绘制放射状重复图案：

/* 红蓝交替的 18 等分重复图案 */
repeating-conic-gradient(#ff0000 0% 10%, #0000ff 10% 20%);

与 repeating-linear-gradient 类似，停止点模式（0%-20%）会重复填充整个圆周，生成齿轮、太阳光芒、放射条纹等图案。

硬渐变与条纹图案

让相邻停止点位置相同，颜色无过渡区域，产生硬边界——这是 CSS 绘制条纹背景的核心技巧：

/* 红绿各半的硬边界 */
linear-gradient(90deg, #ff0000 50%, #00ff00 50%);

/* 三色条纹 */
linear-gradient(90deg, #ff0000 33.33%, #00ff00 33.33%, #00ff00 66.66%, #0000ff 66.66%);

硬渐变的原理是：两个停止点位置相同（如都在 50%），浏览器无需插值，直接从一种颜色”跳变”到另一种颜色。配合 background-size 与 background-repeat 可创建重复条纹：

/* 斜向重复条纹 */
background: repeating-linear-gradient(45deg, #ff0000 0 10px, #00ff00 10px 20px);

repeating-linear-gradient 与 repeating-conic-gradient 是绘制重复图案的利器，可用于进度条、棋盘格、斑马纹等 UI 图案。

渐变叠加与复合背景

CSS 允许用逗号分隔多层渐变，前层覆盖后层。叠加可创造更丰富的视觉效果：

/* 线性 + 径向叠加：营造光晕效果 */
background:
  radial-gradient(circle at 50% 0%, rgba(255,255,255,0.3) 0%, transparent 50%),
  linear-gradient(180deg, #667eea 0%, #764ba2 100%);

叠加顺序：第一个渐变在最上层，最后一个在最底层。利用 transparent（透明）停止点可让下层渐变透过来，实现光晕、遮罩、高光等复合效果。

渐变也可与纯色背景、图片背景叠加。注意：渐变是图像类型，background-color 始终在最底层，渐变叠加在 background-color 之上。

浏览器兼容性与性能

兼容性：linear-gradient 与 radial-gradient 是 CSS3 成熟特性，所有现代浏览器全面支持，IE10+ 也已支持。现代项目无需添加 -webkit- 前缀。圆锥渐变 conic-gradient 兼容性稍差（IE 不支持），但 Chrome 69+、Firefox 83+、Safari 12.1+ 已全面支持，现代项目可放心使用。repeating-conic-gradient 兼容性与 conic-gradient 一致。

性能：CSS 渐变由浏览器实时绘制，不占用网络带宽，性能优于图片背景。但在以下场景需注意：

  1. 动画性能：渐变参数动画（如角度变化）会触发重绘，可能造成卡顿。优化方案是用伪元素叠加 + opacity 切换实现”预渲染两层渐变、切换透明度”的零重绘动画。
  2. 大尺寸渐变：应用于全屏背景的大尺寸渐变可能增加绘制成本，考虑用 will-change: background 提示浏览器。
  3. 叠加层数：过多渐变叠加层会增加合成成本，建议控制在 3 层以内。

应用场景与配套工具

CSS 渐变生成器适用于多种前端开发场景：

  • 网页背景：Hero 区域、卡片、侧边栏的渐变背景
  • 按钮设计：CTA 按钮的渐变填充与悬停态过渡
  • Banner 海报：营销活动页面的视觉冲击渐变
  • 图标着色：用 background-clip: text 实现渐变文字
  • 遮罩效果：配合 mask-image 实现淡入淡出
  • 条纹图案：硬渐变绘制重复条纹背景
  • 饼图与进度环：圆锥渐变配合 border-radius: 50% 实现纯 CSS 饼图与进度环
  • 色轮与调色板：圆锥渐变将色相均匀分布生成色轮，辅助色彩设计
  • 放射图案：repeating-conic-gradient 绘制齿轮、太阳光芒等放射状重复图案

本工具支持线性、径向、圆锥三种渐变类型、角度与方向预设、颜色停止点管理、12 组预设渐变（含饼图、色轮、进度环等圆锥预设），覆盖前端开发中的渐变设计需求。所有参数调节在浏览器本地完成，零上传零追踪。配合站内的 CSS 盒阴影生成器 可为元素添加渐变背景与投影阴影，与 CSS 格式化工具 协同美化渐变代码，与 颜色工具 协同选择渐变配色。