免费在线CSS圆锥渐变(Conic Gradient)生成器，可视化创建圆锥渐变背景。支持自定义色标角度、中心位置、旋转角度、重复渐变，实时预览效果，一键复制CSS代码。纯前端本地运行。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用
Updated: 2026-07-11
渐变设置
色标颜色 (点击色块修改颜色，双击添加色标)
生成的 CSS
background: conic-gradient(from 0deg, #ff0000 0deg, #00ff00 120deg, #0000ff 240deg);
💡 使用说明
1. 添加色标并设置颜色和角度位置
2. 调整旋转角度（from 值）和中心位置
3. 可选勾选 repeating 生成重复圆锥渐变
4. 实时预览渐变效果
5. 一键复制生成的 CSS 代码
❓ 常见问题
Conic Gradient 和 Linear/Radial Gradient 有什么区别？
线性渐变(Linear)沿直线过渡，径向渐变(Radial)从中心向外扩散，而圆锥渐变(Conic)则围绕中心点按角度旋转过渡，类似扇形或饼图效果。Conic Gradient 非常适合制作饼图、色环、日出日落效果等。
重复圆锥渐变有什么用？
重复圆锥渐变(repeating-conic-gradient)会在 360° 之后继续重复色标模式，适合创建齿轮效果、万花筒纹理、雷达扫描图等需要周期性重复的场景。
浏览器兼容性如何？
CSS conic-gradient() 在现代浏览器中拥有良好支持，包括 Chrome 69+、Firefox 83+、Safari 12.1+、Edge 79+。建议为不支持的老旧浏览器提供回退背景色。