🎨 CSS 圆锥渐变生成器

Updated: 2026-07-11

实时预览

色标数: 3
渐变类型: conic-gradient

渐变设置

色标颜色 (点击色块修改颜色,双击添加色标)

生成的 CSS

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

💡 使用说明

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

如何使用CSS 圆锥渐变生成器

使用CSS 圆锥渐变生成器生成内容只需三个简单步骤:

  1. 配置参数
    根据需要调整生成参数,如长度、复杂度、样式或数量。每个选项都有清晰的说明。
  2. 点击生成
    点击"生成"按钮创建内容。工具会立即处理您的偏好设置并在浏览器中生成结果,无需等待服务器响应。
  3. 复制或下载结果
    查看生成结果,点击"复制"复制到剪贴板,或点击"下载"保存为文件。可以无限次生成,没有使用限制。

❓ 常见问题

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+。建议为不支持的老旧浏览器提供回退背景色。