实时预览

色标数: 3

渐变类型: conic-gradient

渐变设置

旋转角度: ° 中心位置 X: % 中心位置 Y: % 重复渐变

模糊柔化: 0%

background: conic-gradient(from 0deg, #ff0000 0deg, #00ff00 120deg, #0000ff 240deg);

1. 添加色标并设置颜色和角度位置
2. 调整旋转角度（from 值）和中心位置
3. 可选勾选 repeating 生成重复圆锥渐变
4. 实时预览渐变效果
5. 一键复制生成的 CSS 代码

线性渐变(Linear)沿直线过渡，径向渐变(Radial)从中心向外扩散，而圆锥渐变(Conic)则围绕中心点按角度旋转过渡，类似扇形或饼图效果。Conic Gradient 非常适合制作饼图、色环、日出日落效果等。

重复圆锥渐变(repeating-conic-gradient)会在 360° 之后继续重复色标模式，适合创建齿轮效果、万花筒纹理、雷达扫描图等需要周期性重复的场景。

CSS conic-gradient() 在现代浏览器中拥有良好支持，包括 Chrome 69+、Firefox 83+、Safari 12.1+、Edge 79+。建议为不支持的老旧浏览器提供回退背景色。