无需登录 数据私有 本地保存

锥形渐变生成器 - 角度色标CSS圆锥渐变

前端设计 生成器 CSS 生成器 锥形渐变
47
0
0
0
拖拽圆上标记调整色标位置
预设模板
deg
%
%
色标列表
CSS 代码
常见问题与知识点

锥形渐变（Conic Gradient）是 CSS 中的一种渐变类型，颜色围绕中心点按角度旋转分布，形成类似饼图或色轮的视觉效果。与线性渐变（沿直线过渡）和径向渐变（从中心向外辐射）不同，锥形渐变的颜色沿圆周方向过渡。语法：conic-gradient(from 角度 at 位置, 颜色1 位置1, 颜色2 位置2, ...)。

conic-gradient 在现代浏览器中已得到广泛支持，包括 Chrome 69+、Firefox 83+、Safari 12.1+、Edge 79+。对于旧版浏览器，可以使用 polyfill 或提供降级方案（如使用 SVG 或 Canvas 模拟）。截至2025年，全球浏览器支持率超过96%。

常见应用包括：饼图和环形图、色轮/取色器、雷达扫描效果、旋转加载动画、进度环形指示器、表盘刻度背景、万花筒图案、按钮悬停特效等。结合 repeating-conic-gradient 可以创建重复图案，适合做刻度线、锯齿边框等。

from 关键字定义渐变起始的角度位置。默认从顶部（0deg/12点钟方向）开始，顺时针旋转。例如 from 90deg 将从右侧（3点钟方向）开始。使用起始角度可以旋转整个渐变图案，而无需逐个修改色标位置。

repeating-conic-gradient 会在整个圆周上重复色标定义的模式。如果色标范围是0%-20%，则该模式会重复5次（360°÷72°=5）。它非常适合创建重复图案，如刻度标记、扇形分割、星形背景等。普通 conic-gradient 只执行一次过渡。

at 关键字定义渐变的中心点位置，默认为 center（50% 50%）。改变中心位置会使渐变偏移，创造出不对称的视觉效果。例如 at 30% 70% 将中心移到左上区域。这在创建特殊视觉效果（如模拟光源偏移）时非常有用。
🔧 相关工具