CSS 渐变生成

拖几下就能调出想要的渐变，代码随手复制走。三种渐变类型、任意多个色标、角度与圆心都能改，右边实时预览。下面还有一排现成配色，点一下直接载入再微调。

角度是怎么定义的

CSS 里 0deg 指向正上方，角度顺时针增加：90deg 从左到右，180deg 从上到下。这和数学里的极角方向相反，也和老式的 -webkit-linear-gradient 不一样——老写法里 left 表示「从左边开始」，新写法里 to left 才是。改老代码时这里最容易翻车。

渐变中间发灰是怎么回事

浏览器默认在 sRGB 空间做线性插值，蓝到黄、红到绿这类互补色的中点会掉进低饱和的灰区。两个办法：在中间手工加一个饱和度高的过渡色标；或者用 linear-gradient(in oklch, blue, yellow) 指定插值色彩空间，OKLCH 下的过渡明显更干净——不过这是较新的特性，老浏览器会整条声明失效，要用 @supports 兜底。

怎么做条纹

把「重复渐变」打开，再把相邻两个色标设成同一位置，颜色就会硬切而不是渐变。比如 repeating-linear-gradient(45deg, #eee 0 10px, #fff 10px 20px) 就是经典的 45° 斜条纹。本页的色标可以拖到重合位置，直接生成这种效果。

锥形渐变能做什么

conic-gradient 绕圆心转一圈，最常见的用途是画饼图和进度环：conic-gradient(#2f6fed 0 35%, #eee 35% 100%) 配上 border-radius:50% 就是一个 35% 的饼图，不用任何图表库。它在 Safari 12.1 以下不支持。

性能提醒

渐变是每帧现算的。给大面积元素加渐变背景、又同时做 transform 动画时，低端安卓机上可能掉帧。变通办法是把渐变固化成一张图片，或者给元素加 will-change: transform 让它单独合成。用渐变做纯色阴影时更推荐直接用 box-shadow。

相关工具

颜色值转换、中间色计算、颜色名对照与配色、盒子阴影调试、CSS 圆角生成。