90°
至少保留 2 个色标。
Help
关于此工具
用可视化方式调出 CSS 渐变并一键取走代码。支持线性（linear）、径向（radial）、圆锥（conic）三种类型，可设置角度、形状、尺寸关键字与渐变中心位置，色标可增删并在 0%–100% 之间精确调整位置。预览随参数实时更新，输出的是标准 background-image 声明，可直接粘进样式表。「随机」按钮在受限色相范围内取色，生成好看且不发灰的渐变。全部处理在你的浏览器内完成，不上传任何数据。
使用方法
- 选择渐变类型：线性、径向或圆锥。
- 调整参数——角度、形状、尺寸关键字与中心位置，可拖动滑块或直接输入数值。
- 增删色标，并在 0%–100% 之间调整每个色标的位置。
- 点击「随机」找灵感，再复制生成的 background-image CSS 到你的样式表。
linear、radial、conic 三种渐变有什么区别？
线性渐变（linear）沿一条指定角度的直线混合颜色；径向渐变（radial）从一个中心点向外扩散，可指定形状（circle / ellipse）与尺寸关键字；圆锥渐变（conic）围绕中心点按角度扫过颜色，适合做色轮、饼图效果。
色标位置百分比怎么理解？
每个色标的百分比表示它在渐变中的位置：0% 是起点，100% 是终点。浏览器会在相邻色标之间插值，比如 50% 与 80% 两个色标会在这一段 30% 的区间内过渡。位置不按升序排列时会出现明显的硬边分界。
生成的 CSS 怎么用？
把复制出的声明粘进 CSS 规则即可，例如 `.hero { background-image: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); }`。这里只生成 background-image 属性，原有的 background-color 可保留作为兜底。
我的渐变会被上传到服务器吗？
不会。预览与代码生成完全在你的浏览器内完成，不会向任何地方发送数据。