🎡
锥形渐变生成器
生成 conic-gradient 锥形/角向渐变，做饼图、色环、进度环等，实时预览复制。
本地处理 · 不上传
加载工具中…
相关：conic · 锥形渐变 · 角向 · 色环 · css
锥形渐变生成器配置起始角度、中心点与各色标位置，生成 conic-gradient 代码。做饼图、色轮与进度环无需图片和 canvas。
使用步骤
- 添加并调整色标
- 设置起始角度与中心位置
- 实时预览效果
- 复制生成的 CSS
使用场景
- 用纯 CSS 画饼图与环形进度条
- 制作取色器用的色轮
- 做棋盘格与放射状装饰背景
- 实现加载动画的渐变环
小贴士
- 锥形渐变绕中心点旋转变色，线性渐变沿直线、径向渐变由内向外——三者分工不同，画饼图只有锥形能做。
- 色标用硬边界（同一位置写两次颜色）可以得到清晰分区，这是画饼图而非渐变的关键技巧。
- 配合 mask 或 border-radius 挖空中心，就能把饼图变成环形进度条。
常见问题
怎么用它画饼图？
关键在于让颜色不过渡：把每种颜色写成起止两个位置且与下一种颜色的起点重合，如 `red 0 30%, blue 30% 60%`，这样就是硬分区而非渐变。
和径向渐变有什么区别？
径向渐变的颜色沿半径方向由内向外变化，锥形渐变的颜色沿圆周角度变化。前者像光晕，后者像扇形分区。
能做动画吗？
渐变本身不能直接过渡，但可以对整个元素做 rotate 变换实现旋转效果，或用 CSS 自定义属性配合 @property 让角度值可动画。
锥形渐变生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用锥形渐变生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。