Conic Gradient 生成器
颜色
CSS 锥形渐变仍然未被充分利用，部分原因是难以手动编写。这个构建器为你提供应用于 ellipse、square、rectangle 或 pie 形状的梯度的实时预览，带有 `from` 角度和 `at` 中心位置的滑块。添加或删除颜色停止、拖动位置，并使用系统颜色选择器选择颜色。五个预设 — 彩虹、日落、单色、棋盘格和 3 段环形图 — 让你开始。输出是纯 CSS，可放入任何样式表；在所有现代浏览器中工作（Chromium 69+、Firefox 83+、Safari 12.1+）。
—
预设:
颜色停止
0.0%
25.0%
50.0%
75.0%
100.0%
CSS
background: conic-gradient(#ef4444 0%, #f59e0b 25%, #10b981 50%, #3b82f6 75%, #a855f7 100%);
在所有现代浏览器中工作（Chromium 69+、Firefox 83+、Safari 12.1+）。所有值都是度和百分比。
使用方法
- 选预设或从默认彩虹开始。调整时预览更新。
- 滑动 `from` 角度旋转整个梯度。移动中心滑块使锥顶偏离中心。
- 在想要硬过渡的地方添加停止（相同位置的两个停止形成锐边 — 对饼图有用）。
常见问题
- Conic 与 linear/radial 有何不同?
- Linear 沿直线插值；radial 沿从一点向外的圆插值；conic 围绕圆插值（像钟面）。Conic 是当梯度应该绕轴扫过时使用的 — 饼/甜甜圈图、色轮、棋盘格图案、加载旋转器。
- 为什么相同位置两个停止?
- 创建硬边而非平滑过渡。`red 0% 25%, blue 25% 50%` 意味着 '从 0 到 25% 是红色，立即从 25 到 50% 是蓝色' — 对饼图分段或锐利棋盘格图案完美。没有重叠，会得到平滑混合。