在线渐变色卡生成器

渐变色卡生成器完整使用指南

本页在浏览器内设计 CSS 渐变并提取色卡。左侧可点选 #presetsGrid 预设、在 #colorStopsContainer 管理颜色节点（颜色与 0–100% 位置，至少保留 2 个），用 #gradientType 切换 linear / radial / conic，用 #angle 调节角度（线性与锥形有效）。 #colorCount（2–12）控制从渐变路径取样色卡数量。getCSS() / updatePreview() 实时刷新 #gradientPreview 与 #colorCards。可「复制 CSS」「复制颜色数组」「随机生成」「下载 PNG」，主题切换写入 localStorage。适合 UI 背景与前端贴代码，不是完整矢量插画编辑器。

操作建议

1. 先点预设快速起稿，再微调节点颜色与位置百分比。
2. 背景/按钮优先线性渐变；聚光效果用径向；色盘感用锥形。
3. 需要色板时调提取数量，点击色卡复制 HEX，或导出 JSON 数组给图表库。
4. 「复制 CSS」得到 background: … 语句，粘贴进样式表即可。
5. 「下载图片」导出 1200×630 PNG，便于封面或社交图底色（按节点线性绘制）。

能力边界

• 节点过少时过渡可能显脏；可加中间色或改用相近色相。
• 径向预览为 circle 简化写法；复杂椭圆/多中心需手写 CSS。
• PNG 导出为线性渐变画布，与锥形/径向屏幕预览可能不完全一致。
• 随机色可能过艳，正式品牌请再人工校对对比度与无障碍。
• 全部本地计算，不上传；公共电脑注意剪贴板内容。

预设、节点与实时预览

页面内置多套预设（如日落、海洋、极光等），点击后会写入 colorStops 并同步类型与角度，再调用 updatePreview()。每个节点包含颜色选择器与位置滑杆；拖动位置或改色会立刻反映到右侧预览。添加节点时默认插在中间色附近，删除时若只剩两个端点会提示无法继续删除。预览区 #gradientPreview 直接把 getCSS() 结果赋给 style.background，因此你看到的效果与复制出的 CSS 一致（PNG 导出除外，见下）。

导出与主题

• 复制 CSS：输出 background: linear-gradient(...); 整行，可粘贴到 class 或内联样式。
• 复制颜色数组：按当前提取数量生成 JSON 字符串数组，便于主题配置或图表 series 配色。
• 下载 PNG：Canvas 1200×630，按节点顺序画线性渐变后触发下载文件名含 gradient。
• 切换主题：在亮色/暗色间切换，偏好写入 localStorage，刷新后尽量保持。
• 随机生成：随机两到多个 HEX 与角度，适合灵感穷尽时快速试错，再人工收敛。

常见问题

复制的 CSS 能直接用吗？

可以。格式为现代浏览器支持的 linear-gradient / radial-gradient / conic-gradient，作为 background 使用。若项目需兼容极老浏览器，请自行加前缀或降级为纯色。

色卡如何计算？

按位置在相邻节点间线性插值 RGB，在 0%–100% 路径上均匀取样得到 HEX；点击色卡即可复制。数量由 #colorCount 控制，默认 5，最大 12。

为什么不能删到只剩一个节点？

渐变至少需要两个端点；removeStop 在仅剩 2 个时会拒绝删除，避免生成非法 CSS。

角度对径向有用吗？

径向预览使用简化的 radial-gradient(circle, …)，角度滑杆主要影响线性与锥形；切换类型后请看预览确认。

使用场景举例

落地页首屏背景、按钮 hover 态、App 启动页、数据大屏主色、社交媒体封面底图、邮件头图底色等，都可以先在本页定稿再导出。设计评审时可截预览图；开发对接时直接贴 CSS 或颜色数组，减少「设计稿色值对不上代码」的来回。

相关工具