CSS 渐变生成器

工作原理

每个色标都是一个包含颜色和 0 到 100 之间位置的对象。每次修改后，色标都会先按位置排序再生成结果，所以你可以按任意顺序输入位置，输出始终有效。随后它们会被拼接成 linear-gradient(<角度>deg, ...) 或 radial-gradient(circle, ...)，具体取决于你选择的类型。这段字符串会直接设为预览框的 background 并打印为输出结果，因此预览就是你的浏览器用同一段 CSS 渲染出来的，而不是近似效果。

如果两种高饱和度颜色之间的渐变看起来发灰，这不是工具的问题：浏览器默认在 sRGB 色彩空间中插值渐变，某些颜色对（蓝到黄是经典案例）之间的直线路径会经过一段去饱和的灰色。解决办法是在中间添加一个色标，设为你真正想要的鲜艳中间色，这个工具让操作变得很简单。

整个渐变都在本页面的 JavaScript 中构建和应用；选择颜色和拖动角度滑块不会触发任何网络请求，你可以在开发者工具的网络面板中亲自验证。