CSS渐变生成器
线性/径向/锥形渐变可视化生成，色标透明度随意调，六种 CSS 写法与文字对比度检查
① 渐变类型与方向
deg
② 颜色节点（至少 2 个，输出时自动按位置从小到大排序）
每行从左到右依次是：取色器、HEX 色值、不透明度滑杆、不透明度读数、位置滑杆、位置数值（%）、删除。色值框支持 #abc / #aabbcc / #aabbccdd（后两位是透明度），也能直接粘 rgb()、hsl() 和 orange 这类颜色名。
③ 实时预览与文字可读性
文字色
透明处假设底色
④ CSS 代码
⑤ 常用渐变色板（点击直接载入到上面的编辑器）
工具介绍
写渐变最费时间的从来不是想不出配色，而是 45deg 到底朝哪边、透明度写成 rgba 还是 8 位 HEX、repeating 为什么没反应这类反复试错。这个工具把参数摆在明面上拖，右边的 CSS 随时可复制：
- 三种类型随时切：linear-gradient 线性、radial-gradient 径向、conic-gradient 锥形，切换后只留下当前类型用得上的控件，不会让形状选项出现在线性渐变里
- 角度与中心可视化：0–360 度滑杆配数字框，八个方位按钮直接点（上 0°、右 90°、下 180°、左 270° 等）；径向和锥形还能分别拖 X / Y 中心，或用九宫格一键落到左上角、正中等位置
- 任意多个颜色节点：每个节点单独设颜色、不透明度和位置，可在最宽的缝隙里插入中间色，也能一键均分位置、整体镜像、把尾色渐隐到全透明
- 色值怎么粘都行：3 位、6 位、8 位 HEX，
rgb()、rgba()、hsl()、hsla()，以及 orange、transparent 这类颜色名都能识别，内部统一换算成 HEX 再输出 - 六种 CSS 写法：background-image、background 简写、多行缩进、内联 style、Tailwind 任意值、CSS 自定义属性，颜色本身还能再切成 HEX / rgb() / hsl() 三种记法
- 兜底纯色开关：勾上后先写
background-color再写background-image，浏览器不支持 conic-gradient 时不会整块空白 - 带棋盘底的实时预览：透明部分一眼可见，渐变上还能叠一行示例文字，逐个色标算出对比度并给出 WCAG 2.1 判定
- 12 个色板与随机配色：落日、海洋、霓虹这类常用渐变点击即载入，其中包含 repeating 斜纹和 conic 彩虹环两种平时不太好手写的样式
- 纯前端计算：不调接口、不上传数据，改任何参数都即时重算并刷新代码块
使用场景
- 给按钮、卡片、横幅挑背景渐变，顺便确认上面的白字能不能看清
- 写 Tailwind 项目需要
bg-[...]任意值类名，不想手工把空格换成下划线 - 做遮罩渐隐（把某个颜色过渡到透明）需要正确的 8 位 HEX 或 rgba 写法
- 设计稿只给了「45 度橙色渐变」，需要还原成能直接粘贴的 CSS
- 学习 conic-gradient 为什么没有 repeating 版本、色标位置为什么不等于距离
三种渐变的坐标并不一样
| 类型 | 生成示例 | 色标百分比的含义 | 常用来做什么 |
|---|---|---|---|
| linear | linear-gradient(135deg, #ff512f 0%, #dd2476 100%) | 沿渐变线方向的距离比例 | 按钮、横幅、卡片底色 |
| radial | radial-gradient(ellipse farthest-side at 30% 20%, #ff512f 0%, #dd2476 100%) | 从中心往外的半径比例 | 光斑、聚光、立体高光 |
| conic | conic-gradient(from 45deg at 50% 50%, #ff512f 0%, #dd2476 100%) | 角度比例，50% 等于 180 度 | 饼图、色环、进度环 |
这也是锥形渐变最容易踩的坑：把线性的 50% 直接搬过去，语义已经从「走到一半距离」变成「转到一半角度」。
角度、中间色与透明度
| 写的角度 | 等价方向关键字 | 颜色往哪边走 |
|---|---|---|
| 0deg | to top | 由下往上 |
| 90deg | to right | 由左往右 |
| 135deg | to bottom right | 左上往右下 |
| 180deg | to bottom | 由上往下 |
| 270deg | to left | 由右往左 |
- 角度会自动归一：输入 400 得到
linear-gradient(40deg, ...)，输入 -45 得到linear-gradient(315deg, ...)，与浏览器的渲染结果一致，但代码短一半 - 中间色是两端的平均：黑到白的渐变在 50% 处是
#808080，所以「在最宽处加一个节点」插出来的颜色就是这一带间的中间色 - 透明度写成 8 位 HEX：0.5 对应
80、0.25 对应40、全透明对应00，例如#39ff1400；同一渐变改成 rgb 记法会得到rgba(57,255,20,0) - hsl 换算会取整：
#ff512f输出hsl(10,100%,59%)，因为色相与亮度都按整数表示，来回转换可能有 1 个色阶的偏差，介意的话保持 HEX 记法
渐变上的文字能不能看清
预览区会按每个色标算一次对比度，并指出最差的那一处。透明度小于 1 的色标会先与你设定的假设底色混合，再计算相对亮度：
| 文字 / 背景 | 对比度 | 工具判定 |
|---|---|---|
| 白字 / #767676 | 4.54:1 | 正文达标（WCAG AA 门槛 4.5:1） |
| 白字 / #777777 | 4.48:1 | 差一点，正文不达标 |
| 白字 / #808080 | 3.95:1 | 只够大号文字（门槛 3:1） |
| 白字 / 白字处色标 | 1.00:1 | 完全看不见，必须改文字色或加遮罩 |
| 黑字 / 纯白底 | 21.00:1 | 两项都达标 |
大号文字指 24px 以上，或 18.66px 加粗。渐变的可读性最差处往往只出现在某一小段，所以工具逐个色标列比值，而不是只给一个平均值。
常见问题
- 勾了 repeating 却看不出重复？只有色标没铺满 0%–100% 时才会重复。色板里的「斜纹条」最后一站在 24%，生成
repeating-linear-gradient(45deg, #e0e5ec 0%, #e0e5ec 12%, #b8c6db 12%, #b8c6db 24%)，每 24% 重复一次；把最后一站拖到 100% 就变回普通渐变 - 锥形渐变为什么没有 repeating 版本？规范里写了
repeating-conic-gradient()，但至今没有任何浏览器实现，所以工具在锥形模式下直接隐藏这个开关，避免产出无效 CSS - 需要加 -webkit- 前缀吗？不需要。linear-gradient 与 radial-gradient 在 Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+ 都可无前缀使用；conic-gradient 需要 Chrome 69+、Edge 17+、Safari 12.1+、Firefox 83+
- 兜底纯色勾不上 background 简写？因为
background:是简写属性，会把background-color一起重置成透明，兜底就白写了。选中「background 简写」时工具会自动取消勾选并提示，请配合 background-image 使用 - 能直接导出图片吗？渐变本身是矢量背景，不需要图片文件，也不会因为缩放发虚。只有在邮件模板、微信图文这类只认位图的场景才需要转成图片
- 两段颜色中间发暗发灰怎么办？CSS 默认在 sRGB 里线性插值，红到绿会经过一块暗黄。可以把渐变拆成三段、在中段手动补一个提亮的色标，或在现代浏览器里改用
linear-gradient(in oklab, ...)这类指定插值空间的写法（工具输出的是兼容性最好的经典写法，未加插值空间关键字） - 想拿到 Tailwind 类名？输出格式里选「Tailwind 任意值」，空格会自动换成下划线，例如
class="bg-[linear-gradient(135deg,#ff512f_0%,#dd2476_100%)]" - 色值框能粘什么？
#abc、#aabbcc、#aabbccdd、rgb(57, 255, 20)、hsl(111, 100%, 54%)和 orange 这类颜色名都认，识别不了的会保留上一次的有效颜色并给出提示。单个颜色请直接用background-color，所以工具至少保留 2 个节点 - 配套的其它前端小工具：拿到的色值要换算格式用 颜色转换，渐变写进样式表后要整理缩进用 CSS格式化，想把渐变做成矢量图再用 SVG预览 检查。所有编辑与计算都在浏览器本地完成，配色方案不会上传到服务器。