渐变生成器
使用可编辑的颜色节点、位置和角度创建线性、径向或锥形渐变，并复制准确表达所选设置的 CSS 或受支持的 Tailwind 值。
HEX 草稿可继续编辑；有效的 #fff 会在结果中展开。离开输入框时会规范化有效输入。不完整或无效输入会清空结果。
请检查 HEX、0–360 的角度及 0–100 的节点位置。
类型
预设
色标 ()
已复制
复制失败。请选择结果并手动复制。
方法与解读
CSS 按顺序写入全部节点。线性使用所选角度，径向使用 circle，锥形使用起始角。预览与 CSS 使用同一条渐变字符串。
位置为 0%–100%，始终保留至少两个节点。90° 从左到右，180° 从上到下。同位置的节点可能形成硬边界。
百分比和角度按数值序列化。工具不计算中间颜色，实际颜色由浏览器绘制。
关于渐变生成器
使用可编辑的颜色节点、位置和角度创建线性、径向或锥形渐变，并复制准确表达所选设置的 CSS 或受支持的 Tailwind 值。
颜色节点把一个不透明 HEX 颜色与百分比关联。可添加、删除、排序节点，使用八种预设或随机颜色。线性渐变沿角度展开，径向从圆心扩散，锥形围绕中心旋转。
线性 90°，#000000 位于 0%，#ffffff 位于 100%，得到 background: linear-gradient(90deg, #000000 0%, #ffffff 100%);。改为 180° 和 20%/80% 时，受支持的 Tailwind 输出仍保留这些选择。
计算使用当前页面中的值，不发送此工具专用的服务器请求。这些工具不保存结果历史或收藏。网站主题可能从 localStorage 读取；网站其他部分仍可能发送自己的请求。
使用场景
如何使用
选择线性、径向或锥形。
为线性或锥形设置角度；径向使用圆形。
编辑各节点的 HEX 和百分比；添加或删除时至少保留两个。
排序位置或应用八种预设之一，然后查看预览。
复制 CSS 或受支持的 Tailwind；四节点或非线性类型使用 CSS。
专业提示
- 复制前检查方向及节点百分比。CSS 是完整表达；Tailwind 区域中的 CSS 提示并不是可用类名。
- 此处 Tailwind 仅对两个或三个线性节点生成任意值类，保留角度和位置。四个以上节点、径向及锥形均明确提示使用 CSS。目标项目必须扫描或包含该类；实际浏览器支持仍需检查。
- 建议先用少量颜色制作简洁的渐变，并在目标布局中检查不同屏幕尺寸下的效果。
故障排除
请检查 HEX、0–360 的角度及 0–100 的节点位置。
位置为 0%–100%，始终保留至少两个节点。90° 从左到右，180° 从上到下。同位置的节点可能形成硬边界。 HEX 草稿可继续编辑；有效的 #fff 会在结果中展开。离开输入框时会规范化有效输入。不完整或无效输入会清空结果。
无法复制。请选择显示的结果并手动复制。
复制前检查方向及节点百分比。CSS 是完整表达；Tailwind 区域中的 CSS 提示并不是可用类名。
常见问题解答
该颜色在渐变进程的 20% 处达到。位置影响过渡，并保留在 CSS 和受支持的 Tailwind 类中。
此助手只表达两个或三个线性节点。径向、锥形和四节点渐变仍保留预览与 CSS，不会被替换成错误的向右渐变。
CSS渐变是两种或多种颜色之间的平滑过渡。它们可以用于背景、边框和其他元素，无需图像。
现代CSS渐变在所有主流浏览器中得到良好支持。线性和径向渐变具有出色的兼容性。