UI 稿渐变色落地
设计师交付了 Sketch 源文件,渐变角度是 135°,中间色点在 40% 位置。前端手写 linear-gradient 时,肉眼调色总差 5% 的偏移。本工具可以直接拖拽色标位置、输入精确角度,实时预览并同步生成 CSS 代码。复制粘贴到样式表,色值、角度、色标位置与设计稿完全一致,省去反复截图对比的环节。
设计师在 Figma 里调了半天渐变角度,切到 CSS 里发现方向不对——线性、径向、锥形三种渐变模式,每种都有自己的坐标逻辑。这个工具把角度和色标转成标准 CSS 代码,同时生成预览图,不用在 DevTools 里反复试。所有计算在浏览器内完成,不传任何色值到服务器。
设计师交付了 Sketch 源文件,渐变角度是 135°,中间色点在 40% 位置。前端手写 linear-gradient 时,肉眼调色总差 5% 的偏移。本工具可以直接拖拽色标位置、输入精确角度,实时预览并同步生成 CSS 代码。复制粘贴到样式表,色值、角度、色标位置与设计稿完全一致,省去反复截图对比的环节。
做视频封面时,纯色背景太单调,找渐变素材又怕撞车。用本工具从主色调 #FF6B6B 出发,选「径向渐变」模式,把中心点偏移到左上角 20% 位置,再拉一个 30% 透明度的白色遮罩层。复制色值到 PS 里填充,封面有了呼吸感,且颜色组合完全由自己控制,不依赖现成模板。
周报标题页用深蓝到浅蓝的线性渐变,但 PPT 自带的渐变工具拉出来总出现明显色带。在本工具里选「线性渐变」,两端分别取 #1A237E 和 #42A5F5,把色标间距设为 60% 和 100%,生成后截图贴入 PPT。色阶过渡平滑,没有条纹感,且色值可以直接写进公司模板的 XML 里复用。
品牌 Logo 需要一圈锥形渐变(conic-gradient)做光晕效果,从黄色过渡到橙色再回到黄色。设计软件里调锥形渐变参数很麻烦,本工具直接输入起始角度 0° 和结束角度 360°,中间加 3 个色标。实时看到环状渐变效果后截图给客户确认,改色标位置也只需拖一下,比 PS 里反复调整快得多。
| 输入 | 输出 | 说明 |
|---|---|---|
| 线性渐变,从 #FF0000 到 #0000FF,角度 45deg | background: linear-gradient(45deg, #FF0000, #0000FF); | 常规:最基础的线性渐变,验证角度和双色过渡是否正确 |
| 径向渐变,从 #FFFFFF 到 #000000,形状 circle,位置 center | background: radial-gradient(circle at center, #FFFFFF, #000000); | 常规:径向渐变标准用法,验证形状参数和颜色反转 |
| 锥形渐变,从 #FF0000 到 #00FF00 到 #0000FF,角度 0deg | background: conic-gradient(from 0deg, #FF0000, #00FF00, #0000FF); | 常规:锥形渐变三色过渡,验证多色和起始角度 |
| 线性渐变,从 rgba(255,0,0,0.5) 到 rgba(0,0,255,0.8),角度 90deg | background: linear-gradient(90deg, rgba(255,0,0,0.5), rgba(0,0,255,0.8)); | 边界:带透明度的颜色,验证 rgba 格式是否被正确解析 |
| 径向渐变,从 #FF0000 到 #FF0000,形状 ellipse,位置 top left | background: radial-gradient(ellipse at top left, #FF0000, #FF0000); | 边界:起始和结束颜色相同,验证输出是否出现纯色(应无渐变效果) |
| 线性渐变,从 #123456 到 #ABCDEF,角度 -45deg | background: linear-gradient(-45deg, #123456, #ABCDEF); | 边界:负角度值,验证 CSS 标准是否支持负角度(应正常渲染) |
| 锥形渐变,从 #000 到 #fff,角度 360deg(完整一圈) | background: conic-gradient(from 360deg, #000, #fff); | 易错:360deg 和 0deg 在视觉上等价,但某些工具可能报错或输出异常 |
| 线性渐变,从 #FF0000 到 #00FF00 到 #0000FF,角度 180deg,带 3 个色标 | background: linear-gradient(180deg, #FF0000, #00FF00, #0000FF); | 易错:多色标时用户常忘记写逗号或颜色值顺序颠倒,验证解析容错性 |
1.CSS 渐变方向写成了角度但没加单位
background: linear-gradient(45, red, blue);background: linear-gradient(45deg, red, blue);CSS 渐变的角度值必须带单位 deg(degree),否则浏览器会忽略该声明,退回到默认渐变方向(从上到下)。
2.径向渐变的形状参数写成了百分比
background: radial-gradient(50%, red, blue);background: radial-gradient(circle, red, blue);radial-gradient 的形状参数只接受 circle 或 ellipse,不接受百分比。百分比只能用于 size 参数(如 closest-side)。
3.色标位置写在了颜色值前面
background: linear-gradient(red 0%, 50% blue, 100% green);background: linear-gradient(red 0%, blue 50%, green 100%);CSS 渐变语法要求每个色标先写颜色值、后写位置(可选),顺序颠倒会导致整条声明被浏览器忽略。
4.锥形渐变用了 linear-gradient 的逗号分隔
background: conic-gradient(red, blue, green);background: conic-gradient(from 0deg, red, blue, green);conic-gradient 必须显式指定起始角度 from ...deg,否则浏览器默认从 0deg 开始,但省略 from 关键字可能导致某些旧浏览器解析失败。
5.颜色值用了简写十六进制但位数不对
background: linear-gradient(#fff, #0000ff);background: linear-gradient(#ffffff, #0000ff);CSS 中 #fff 是 #ffffff 的简写,但 #0000ff 是完整 6 位,混用不会报错但容易在团队协作中引发色值理解歧义。推荐统一使用 6 位或 8 位十六进制。
6.渐变方向写成了 top 但实际想要从底部到顶部
background: linear-gradient(top, red, blue);background: linear-gradient(to top, red, blue);CSS 渐变方向关键字必须带 to 前缀。to top 表示从底部到顶部,而单独写 top 会被浏览器当作无效值,退回到默认方向。
7.重复渐变忘了加 repeating- 前缀
background: linear-gradient(red 0%, red 10%, blue 10%, blue 20%);background: repeating-linear-gradient(red 0%, red 10%, blue 10%, blue 20%);不带 repeating- 前缀的渐变只在容器尺寸内渲染一次,超出部分会显示空白或背景色。repeating- 前缀让色标模式无限循环填充。
8.色标位置使用了负值或超过 100%
background: linear-gradient(red -10%, blue 120%);background: linear-gradient(red 0%, blue 100%);CSS 规范规定色标位置应在 0%~100% 之间,负值或超过 100% 的行为未定义,不同浏览器渲染结果不一致。
C(r, g, b, a) = rgba(r, g, b, a) 或 #RRGGBB[AA]
r红色通道,0–255 整数g绿色通道,0–255 整数b蓝色通道,0–255 整数aAlpha 透明度,0–1 浮点数线性渐变从 rgba(255, 0, 0, 1) 到 rgba(0, 0, 255, 0.5):起点红色不透明,终点蓝色半透明,中间颜色按线性插值计算。例如在 50% 位置,r=127.5, g=0, b=127.5, a=0.75,对应 rgba(127, 0, 127, 0.75)。
不是。本工具颜色选择器支持任意颜色,不限于预设。点击色块或输入框,弹出色盘后可以拖拽选色,也可以直接输入 Hex(如 #FF0000)或 RGB(如 rgb(255,0,0))。每个渐变节点(色标)都可以独立设置颜色,所以红到蓝完全没问题,只要把起点设为红色、终点设为蓝色即可。
可能是没有调整径向渐变的中心点位置或形状参数。径向渐变默认从中心向外扩散,如果只改颜色没改形状(圆形/椭圆)或尺寸(如设为覆盖整个容器),视觉效果可能接近线性。建议尝试把形状改为「椭圆」并缩小尺寸百分比,或者拖动中心点偏移,就能看到明显的放射效果。
线性渐变颜色沿直线过渡(如从上到下);锥形渐变颜色围绕中心点旋转过渡,像切开的蛋糕或雷达图。锥形适合做色轮、仪表盘背景、光盘反射效果。如果你要模拟阳光从一点发散的光晕,用径向;如果要做一个从 0 度到 360 度颜色循环的圆环,用锥形。本工具三种模式都支持,切换即可看到实时预览。
CSS 中 linear-gradient 的角度单位是 deg,0deg 是从下到上,90deg 是从左到右。本工具默认角度 180deg(从上到下),如果你在项目中用了不同的角度值,方向就会变。另外注意,如果容器尺寸变了(比如从正方形改成横幅),径向渐变的形状比例也会变化。建议复制代码后先检查容器宽高比是否一致。
不需要上传任何图片。本工具完全在浏览器本地运行,所有渐变都是通过颜色节点实时计算生成的,不涉及任何图片上传。你只需要选择颜色、调整角度和类型,结果直接显示在页面上。因为是纯前端实现,数据不会离开你的设备,离线也可以使用(首次加载后)。
大概率不是卡了,可能是当前预览区域太小或颜色差异不明显。先确认是否点击了「应用」或「更新」按钮(部分工具需要手动触发刷新)。另外检查色标节点数量:如果只有 1 个色标,渐变不会显示(至少需要 2 个)。建议增加一个色标节点,或者拖动已有色标的位置滑块,预览区应该立即响应。
目前本工具主要提供 CSS 代码输出,直接复制即可用于网页开发。如果需要导出为图片(PNG/JPG),可以截图预览区域,或者使用浏览器自带的「截图」功能(F12 开发者工具中可截取特定元素)。后续版本可能会增加图片导出功能,当前建议用截图方式获取图片格式。
本工具对色标数量没有硬性限制,理论上可以无限添加。实际使用时建议不超过 10 个,否则颜色过渡会过于细碎,视觉上反而像色块堆叠而不是平滑渐变。每个色标都可以独立设置颜色和位置百分比,通过点击「添加色标」按钮增加节点,拖动位置滑块控制过渡节奏。
颜色差异通常由两个原因造成:一是屏幕色域不同(比如手机 OLED 屏幕色彩更艳丽),二是浏览器对 CSS 渐变的渲染引擎有细微差异。本工具生成的 CSS 使用标准 sRGB 色域,绝大多数现代浏览器一致。建议先在同一个浏览器不同设备上对比,如果差异明显,可能是显示器未校准。
隐私保证所有计算与处理均在你的浏览器本地完成,输入数据不会上传服务器,也不会保存或共享。