设计配色 · 渐变生成

渐变生成器

线性/径向/锥形/CSS 代码

本地处理 · 不上传 免费 · 无需登录 无次数限制 累计 76 次使用
方 向Linear Angle
135°
八向快选
色 标Color Stops · 拖拽编辑

条上点击新增色标 · 拖拽手柄改位置 · 双击手柄删除 · ≥2 标

预 设Gallery · 含中国传统色
linear-gradient
就绪 · 拖拽色标实时生成 CSS · 全程浏览器本地处理
第一节

关于本工具

About

设计师在 Figma 里调了半天渐变角度,切到 CSS 里发现方向不对——线性、径向、锥形三种渐变模式,每种都有自己的坐标逻辑。这个工具把角度和色标转成标准 CSS 代码,同时生成预览图,不用在 DevTools 里反复试。所有计算在浏览器内完成,不传任何色值到服务器。

使用场景

UI 稿渐变色落地

设计师交付了 Sketch 源文件,渐变角度是 135°,中间色点在 40% 位置。前端手写 linear-gradient 时,肉眼调色总差 5% 的偏移。本工具可以直接拖拽色标位置、输入精确角度,实时预览并同步生成 CSS 代码。复制粘贴到样式表,色值、角度、色标位置与设计稿完全一致,省去反复截图对比的环节。

B 站封面渐变色

做视频封面时,纯色背景太单调,找渐变素材又怕撞车。用本工具从主色调 #FF6B6B 出发,选「径向渐变」模式,把中心点偏移到左上角 20% 位置,再拉一个 30% 透明度的白色遮罩层。复制色值到 PS 里填充,封面有了呼吸感,且颜色组合完全由自己控制,不依赖现成模板。

PPT 标题背景板

周报标题页用深蓝到浅蓝的线性渐变,但 PPT 自带的渐变工具拉出来总出现明显色带。在本工具里选「线性渐变」,两端分别取 #1A237E 和 #42A5F5,把色标间距设为 60% 和 100%,生成后截图贴入 PPT。色阶过渡平滑,没有条纹感,且色值可以直接写进公司模板的 XML 里复用。

锥形渐变 Logo 预览

品牌 Logo 需要一圈锥形渐变(conic-gradient)做光晕效果,从黄色过渡到橙色再回到黄色。设计软件里调锥形渐变参数很麻烦,本工具直接输入起始角度 0° 和结束角度 360°,中间加 3 个色标。实时看到环状渐变效果后截图给客户确认,改色标位置也只需拖一下,比 PS 里反复调整快得多。

第二节

使用指南

Getting Started

使用步骤

  1. 1在「类型」下拉菜单选择渐变样式(线性/径向/锥形),画布预览区同步更新基础效果
  2. 2拖动色标条上的色块或点击「添加色标」按钮,颜色面板弹出后选色,色标位置可拖拽调整
  3. 3点击「角度」输入框(仅线性/锥形)或「中心点」坐标输入框(仅径向),数值变化后预览即时重绘
  4. 4展开「CSS 代码」面板,代码框内自动生成当前渐变的 background 属性值,点击复制按钮即可取用

输入输出示例

输入输出说明
线性渐变,从 #FF0000 到 #0000FF,角度 45degbackground: linear-gradient(45deg, #FF0000, #0000FF);常规:最基础的线性渐变,验证角度和双色过渡是否正确
径向渐变,从 #FFFFFF 到 #000000,形状 circle,位置 centerbackground: radial-gradient(circle at center, #FFFFFF, #000000);常规:径向渐变标准用法,验证形状参数和颜色反转
锥形渐变,从 #FF0000 到 #00FF00 到 #0000FF,角度 0degbackground: conic-gradient(from 0deg, #FF0000, #00FF00, #0000FF);常规:锥形渐变三色过渡,验证多色和起始角度
线性渐变,从 rgba(255,0,0,0.5) 到 rgba(0,0,255,0.8),角度 90degbackground: linear-gradient(90deg, rgba(255,0,0,0.5), rgba(0,0,255,0.8));边界:带透明度的颜色,验证 rgba 格式是否被正确解析
径向渐变,从 #FF0000 到 #FF0000,形状 ellipse,位置 top leftbackground: radial-gradient(ellipse at top left, #FF0000, #FF0000);边界:起始和结束颜色相同,验证输出是否出现纯色(应无渐变效果)
线性渐变,从 #123456 到 #ABCDEF,角度 -45degbackground: 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% 的行为未定义,不同浏览器渲染结果不一致。

第三节

工作原理

How It Works

核心公式

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)。

选择渐变类型线性 / 径向 / 锥形设置颜色与角度色标 / 方向 / 半径浏览器实时渲染Canvas / CSS 混合预览效果实时更新生成 CSS 代码导出代码
用户输入 本地处理 输出结果
第五节

常见问题

Q & A
我想做个从红到蓝的渐变,但怎么调颜色都只能选预设的几种吗?

不是。本工具颜色选择器支持任意颜色,不限于预设。点击色块或输入框,弹出色盘后可以拖拽选色,也可以直接输入 Hex(如 #FF0000)或 RGB(如 rgb(255,0,0))。每个渐变节点(色标)都可以独立设置颜色,所以红到蓝完全没问题,只要把起点设为红色、终点设为蓝色即可。

为什么我选了径向渐变,出来的效果还是像线性一样?

可能是没有调整径向渐变的中心点位置或形状参数。径向渐变默认从中心向外扩散,如果只改颜色没改形状(圆形/椭圆)或尺寸(如设为覆盖整个容器),视觉效果可能接近线性。建议尝试把形状改为「椭圆」并缩小尺寸百分比,或者拖动中心点偏移,就能看到明显的放射效果。

锥形渐变和线性渐变到底有什么区别,什么时候用锥形?

线性渐变颜色沿直线过渡(如从上到下);锥形渐变颜色围绕中心点旋转过渡,像切开的蛋糕或雷达图。锥形适合做色轮、仪表盘背景、光盘反射效果。如果你要模拟阳光从一点发散的光晕,用径向;如果要做一个从 0 度到 360 度颜色循环的圆环,用锥形。本工具三种模式都支持,切换即可看到实时预览。

生成的 CSS 代码我复制到项目里,为什么渐变方向不对?

CSS 中 linear-gradient 的角度单位是 deg,0deg 是从下到上,90deg 是从左到右。本工具默认角度 180deg(从上到下),如果你在项目中用了不同的角度值,方向就会变。另外注意,如果容器尺寸变了(比如从正方形改成横幅),径向渐变的形状比例也会变化。建议复制代码后先检查容器宽高比是否一致。

这个工具要上传图片才能生成渐变吗?我不想传图。

不需要上传任何图片。本工具完全在浏览器本地运行,所有渐变都是通过颜色节点实时计算生成的,不涉及任何图片上传。你只需要选择颜色、调整角度和类型,结果直接显示在页面上。因为是纯前端实现,数据不会离开你的设备,离线也可以使用(首次加载后)。

我调整了颜色但预览没变化,是不是卡了?

大概率不是卡了,可能是当前预览区域太小或颜色差异不明显。先确认是否点击了「应用」或「更新」按钮(部分工具需要手动触发刷新)。另外检查色标节点数量:如果只有 1 个色标,渐变不会显示(至少需要 2 个)。建议增加一个色标节点,或者拖动已有色标的位置滑块,预览区应该立即响应。

生成的渐变能导出成图片吗,还是只能复制 CSS?

目前本工具主要提供 CSS 代码输出,直接复制即可用于网页开发。如果需要导出为图片(PNG/JPG),可以截图预览区域,或者使用浏览器自带的「截图」功能(F12 开发者工具中可截取特定元素)。后续版本可能会增加图片导出功能,当前建议用截图方式获取图片格式。

我做 UI 设计,想生成多个色标的复杂渐变,最多能加几个颜色?

本工具对色标数量没有硬性限制,理论上可以无限添加。实际使用时建议不超过 10 个,否则颜色过渡会过于细碎,视觉上反而像色块堆叠而不是平滑渐变。每个色标都可以独立设置颜色和位置百分比,通过点击「添加色标」按钮增加节点,拖动位置滑块控制过渡节奏。

为什么我设置的渐变在手机上看和电脑上颜色不一样?

颜色差异通常由两个原因造成:一是屏幕色域不同(比如手机 OLED 屏幕色彩更艳丽),二是浏览器对 CSS 渐变的渲染引擎有细微差异。本工具生成的 CSS 使用标准 sRGB 色域,绝大多数现代浏览器一致。建议先在同一个浏览器不同设备上对比,如果差异明显,可能是显示器未校准。

隐私保证所有计算与处理均在你的浏览器本地完成,输入数据不会上传服务器,也不会保存或共享。

选择 打开 +新窗口 esc关闭