CSS 渐变

线性、径向、锥形三种渐变各配一个重复开关，停靠点支持本页颜色工具认的全部记法（关键字、十六进制、hsl()、oklch() 都行），列表可增删、可整表首尾互换、可留空位置让浏览器均分——先后次序最终由每个停靠点的「位置 %」表达，所以行与行之间不提供上移。输出第一行永远是可以直接粘的 background-image: …;，角度记法用现代口径：linear-gradient 的 0deg 指向正上方、顺时针增加；conic-gradient 的 from 同理。

旧式 -webkit-linear-gradient 的角度口径完全不同：以元素左下角为原点、0deg 指向右、逆时针增加，所以换算式是 老角 =(90−新角) mod 360；遇到 0/90/180/270 的整数角时本工具改用方向关键词输出——注意旧语法的关键词说的是渐变从哪条边出发，-webkit-linear-gradient(top, …) 对应现代 to bottom。径向的老写法尺寸关键词只有 cover/contain 这代叫法，输出时自动映射（farthest-corner→cover 等）。conic-gradient 没有老式对应物，页面只给出降级建议（改线性或纯色），不假装能兼容。渐变里不要用裸 transparent：向 transparent 插值等于向全透明黑插值，中段会穿出一层发暗的灰，正确写法是把透明端写成与另一端同色相、alpha=0 的 rgba(x,y,z,0)。

CSS 渐变怎么用

• 先选类型再调角度：类型切到径向时才会出现形状/大小/定位控件；锥形里角度框变成 from 起始角。重复开关给前两者产出 repeating-linear/radial-gradient，做无缝纹理时用位置留空的均分停靠点最省事。表盘点一下就能设角度，按住拖动可连续调，聚焦后用方向键是 ±1°、Shift+方向键 ±15°、PageUp/PageDown ±45°、Home/End 归到 0 或 360；数字框与表盘双向同步。
• 停靠点编辑：颜色框旁有小色块即时回显解析结果，认不出的颜色会整行报进提示条；「在 50% 处硬切」按钮演示同位置技巧，「首尾互换」用来翻转方向而不动角度，每行只剩「删除」（少于两个停靠点时禁用）。三条预览带排在表格上方：140px 那条就是输出第一行的实际背景，36px 那条把同一渐变压在 #f5f5f7 底色上、半透明端的表现只能在这里看见，14px 细条把同位置硬切与色带断层放大成看得见的一条边。渐变里不要用裸 transparent 的警告收在停靠点表与输出块之间那条「为什么这样写」折叠里，收起时只要当前颜色里有风险，标题旁就会补一句「其中 N 条与当前颜色有关」。
• 读输出块：输出从上到下依次是：现代语法一行、对应 -webkit 老写法一行（conic 时为降级注释）、先底色后渐变的兜底两行。全部是纯文本，自行选中复制，本页没有复制按钮。
• 两个能直接生成的写法：两个实战技巧直接生成在输出里：其一是「同位置硬切」——两个相邻停靠点写同一个百分数就得到无过渡的色带，做条纹、进度分段、日历双周线都靠它，不必加 mask；其二是「兜底底色」——先 background-color 铺第一停靠点的纯色，再叠 background-image，老浏览器或不支持某记法时至少不至于白屏。

常见问题