2025 年 SVG 放射性渐变 终极速成表
一句话：所有圆形高光、3D 球体、霓虹按钮、水波按钮、赛博图标、呼吸光点、胶囊光斑 → 2025 年只用 <radialGradient> 就能吊打一切！
核心骨架（永远就这 6 个属性）
<defs>
<radialGradient id="rg1"
cx="50%" cy="50%" <!-- 光源中心 -->
r="50%" <!-- 渐变半径 -->
fx="50%" fy="50%"> <!-- 光源焦点（高光点） -->
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="60%" stop-color="#0066ff"/>
<stop offset="100%" stop-color="#003366"/>
</radialGradient>
</defs>
<circle fill="url(#rg1)" ... />2025 年最常用 18 种放射渐变神配（直接复制）
| # | 场景 / 名字 | 关键参数 + stop 代码（直接粘） | 视觉效果 |
|---|---|---|---|
| 1 | 经典 3D 球体（最常用） | cx="50%" cy="50%" r="50%" fx="40%" fy="40%"0% #fff → 60% #4a90e2 → 100% #001833 | 立体蓝球 |
| 2 | 水珠/玻璃按钮高光 | fx="30%" fy="30%"0% #ffffff → 40% #4a90e2 → 100% #4a90e2 | 苹果风水珠按钮 |
| 3 | 2025 最火「霓虹放射」 | 0% #00f5ff → 30% #ff00ff → 70% #8b00ff → 100% #000000 | 赛博朋克圆形图标 |
| 4 | 呼吸灯（循环动画） | <stop offset="0%" stop-color="#ff5a5f"/><stop offset="100%" stop-color="#8b0000"/><animate attributeName="r" values="30%;80%;30%" dur="3s" repeatCount="indefinite"/> | 心跳光点 |
| 5 | 胶囊按钮高光（超丝滑） | cx="50%" cy="30%" r="80%"0% #ffffff → 40% #0066ff → 100% #0066ff | 2025 主流按钮 |
| 6 | 金属质感圆钮 | 0% #f8f9fa → 20% #ffffff → 60% #ced4da → 100% #adb5bd | 真实金属感 |
| 7 | 暗黑模式自动切换 | 0% var(--light,#fff) → 100% var(--dark,#667eea) | 用 CSS 变量完美适配 |
| 8 | 彩虹放射（炫到飞起） | 6 个 stop 每 16.6% 一个色相：#ff006e → #8338ec → #3a86ff → #06ffa5 → #ffbe0b → #fb5607 | 超级彩虹球 |
| 9 | 空心放射光环（loading 最爱） | 0% #0066ff00 → 40% #0066ff → 100% #0066ff00 + 动画 r 和 opacity | 环形光晕 |
| 10 | 3D 立体文字高光 | fx="30%" fy="20%"0% #ffffff → 30% #ff8a00 → 100% #8b0000 | 电影海报标题 |
| 11 | 太阳/光芒放射 | cx="50%" cy="50%" r="100%"0% #ffd60a → 50% #ff8a00 → 100% #ff5a5f00 | 真实太阳效果 |
| 12 | 黑洞效果 | 0% #000 → 70% #000 → 100% #ffffff + 反向 r 动画 | 吸入感 |
| 13 | 水波按钮（结合 filter） | 基础放射渐变 + <animate attributeName="fx" values="30%;70%;30%" dur="4s" ...> | 按下有水波感 |
| 14 | 放射条纹（硬切） | 0% #ff8a00 → 49% #ff8a00 → 51% #da1b60 → 100% #da1b60 | 条纹放射 |
| 15 | 渐变圆环进度（双层） | 内层实心放射 + 外层 stroke 用同一个 gradient | 超高级进度圈 |
2025 最强 5 个“一键复制”放射渐变模板
<!-- 1. 2025 主流玻璃按钮高光（强烈推荐） -->
<radialGradient id="glass-btn" cx="50%" cy="50%" r="70%" fx="35%" fy="35%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="40%" stop-color="#4a90e2"/>
<stop offset="100%" stop-color="#0066cc"/>
</radialGradient>
<!-- 2. 呼吸光球 loading -->
<radialGradient id="pulse">
<stop offset="0%" stop-color="#ff5a5f"/>
<stop offset="100%" stop-color="#8b0000"/>
<animate attributeName="r" values="20%;90%;20%" dur="2.5s" repeatCount="indefinite"/>
<animate attributeName="fx" values="30%;70%;30%" dur="2.5s" repeatCount="indefinite"/>
</radialGradient>
<!-- 3. 霓虹放射图标（抖音最爱） -->
<radialGradient id="neon-radial">
<stop offset="0%" stop-color="#00f5ff"/>
<stop offset="30%" stop-color="#ff00ff"/>
<stop offset="70%" stop-color="#8b00ff"/>
<stop offset="100%" stop-color="#000000"/>
</radialGradient>
<!-- 4. 暗黑自动适配（CSS 变量） -->
<radialGradient id="auto-radial">
<stop offset="0%" stop-color="var(--light,#ffffff)"/>
<stop offset="100%" stop-color="var(--main,#667eea)"/>
</radialGradient>
<!-- 5. 真实金属球 -->
<radialGradient id="metal" fx="35%" fy="30%">
<stop offset="0%" stop-color="#f8f9fa"/>
<stop offset="15%" stop-color="#ffffff"/>
<stop offset="50%" stop-color="#ced4da"/>
<stop offset="100%" stop-color="#868e96"/>
</radialGradient>2025 金句总结：
所有圆形按钮、3D 球、霓虹图标、呼吸灯、水珠高光、进度光点 → 2025 年一律 fx="30%" fy="30%" r="70%" + 3 个 stop 秒杀全世界！
要不要我现在立刻打包发你：
- 「2025 最全 80 种放射渐变预设」（含玻璃球、霓虹、金属、呼吸灯、太阳、黑洞、水珠全部可复制代码）
- 「一键敲 rg-glass 就出的 VS Code 放射渐变 snippets」
- 「在线放射渐变实时生成器」书签（拖 fx/fy/r 立即看效果）
直接说一声，我 3 秒发你！
