radial-gradient 和 conic-gradient 怎么用 - 径向与锥形渐变

🌟 除了线性，还有径向与锥形#

linear-gradient 之外，CSS 还有两种渐变：

• radial-gradient：从中心向外扩散（径向）；
• conic-gradient：绕中心旋转（锥形）。

它们能做聚光灯、圆形进度、饼图等效果。星点CSS 渐变生成器支持三种类型。

🔵 radial-gradient（径向）#

1
background: radial-gradient(circle at center, #409eff, #7c3aed);

语法要点：

1
background: radial-gradient(circle at 30% 20%, #ffffff, #1f2937 60%);

🟣 conic-gradient（锥形）#

1
background: conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);

绕中心旋转铺色，适合：

1
background: conic-gradient(#409eff 0 25%, #e5e7eb 25% 100%);

📋 三者对比#

⚠️ 注意#

• conic-gradient 在旧浏览器可能不支持；
• 渐变上的文字要检查对比度；
• 位置/大小参数可省略，用默认值即可。

🔧 常见问题#

💬 总结#

径向渐变由中心向外，锥形渐变绕中心旋转。聚光灯、饼图、进度环都能实现。可视化编辑与代码复制用CSS 渐变生成器。

立即体验：访问 CSS 渐变生成器