CSS 渐变生成器
用可拖动的色标条、图层叠加、随机调色板和可一键复制的规则，可视化构建线性、径向和锥形 CSS 渐变。
正在加载工具…
CSS 渐变生成器 — 可视化设计多色标渐变：在实时色标条上拖动色标来调整位置，点击色标条添加色标，在支持的浏览器中还能用取色器吸取颜色。将多个线性、径向或锥形图层叠加到一个 background 中，调节径向的形状、尺寸与中心，随机生成渐变，套用精选调色板，或一次性旋转所有色相。一切都在你的浏览器中完成，颜色和 CSS 绝不会发送到服务器。
CSS 渐变生成器 是什么？
CSS 渐变生成器是一款免费的浏览器内工具，面向希望可视化构建渐变而非手写语法的网页设计师和前端开发者。选择线性、径向或锥形（可附带重复变体），然后在可拖动的预览条上或在每个色标行中用 HEX 颜色和位置字段编辑色标。径向渐变提供圆形/椭圆形状、尺寸关键字（closest-side、closest-corner、farthest-side、farthest-corner）以及 at X% Y% 中心；锥形渐变则接受起始角度和中心。你可以将多个渐变图层用逗号叠加进一个 background，生成随机渐变，套用精选调色板预设，旋转每个色标的色相，并复制可直接粘贴的 background 规则。
如何使用 CSS 渐变生成器
- 选择渐变类型——线性、径向或锥形——并在选项中切换“重复”以获得重复图案。
- 在预览条上拖动色标来调整位置，点击条上的空白处添加色标，或双击色标将其删除。
- 用每个色标的 HEX 颜色和位置字段进行微调，或使用取色器（在支持时）从屏幕吸取颜色。
- 对于径向渐变，设置形状（圆形或椭圆）、尺寸关键字以及中心 X/Y；对于锥形，设置起始角度和中心。
- 添加更多图层以将渐变叠加进一个 background，尝试“随机”，套用调色板预设，或一次性旋转所有色相。
- 复制生成的 CSS background 规则并粘贴到你的样式表中。
示例
简单的双色线性渐变
输入
线性，90deg，#4f86f7 位于 0%，#9333ea 位于 100%
输出
background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);
带形状、尺寸和中心的径向渐变
输入
径向，ellipse farthest-corner at 30% 30%，#ffffff 0%，#4f86f7 100%
输出
background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);
用逗号连接的两个叠加图层
输入
图层 1 线性 90deg；图层 2 径向 circle at 50% 50%
输出
background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);
常见问题
- 支持哪些渐变类型和选项？
- 线性、径向和锥形渐变，每种都可附带重复变体。径向增加圆形/椭圆形状、尺寸关键字（closest-side、closest-corner、farthest-side、farthest-corner）和 at X% Y% 中心；锥形增加起始角度和中心。你还可以将多个图层叠加进一个 background。
- 可拖动的色标条如何工作？
- 沿色标条拖动任意色标可改变其位置，点击条上的空白处会插入一个带插值颜色的新色标，双击色标可将其删除（至少保留两个色标）。每个色标在条下方还有 HEX 颜色和位置字段。
- 我可以从屏幕吸取颜色吗？
- 可以，在支持 EyeDropper API 的浏览器上。可用时，每个色标旁会出现取色器按钮；点击后即可拾取屏幕上的任意像素。你也始终可以输入 HEX 值或使用原生色块。
- 随机、调色板和色相旋转有什么作用？
- “随机”会用一个全新的随机渐变替换当前图层，调色板预设会将当前图层的色标替换为精选配色，“旋转色相”则一次性移动每个图层中每个色标的色相。它们只有在你点击时才会改变渐变。
- 我的颜色或 CSS 会被上传到任何地方吗？
- 不会。渐变完全在你的浏览器中通过本地字符串和颜色运算构建——任何颜色、CSS 或设置都不会被发送到服务器，因此它可离线使用并为你的工作保密。