2025 年 SVG 线性渐变 终极速成表
背会这 8 行代码，你就能做出 99% 的高级感按钮、进度条、卡片、霓虹光轨、呼吸灯、赛博文字……
1. 核心骨架（永远就这 5 个属性）
<defs>
<linearGradient id="g1" <!-- 名字随便取 -->
x1="0%" y1="0%" <!-- 起点 -->
x2="100%" y2="100%"> <!-- 终点 -->
<stop offset="0%" stop-color="#ff8a00"/>
<stop offset="100%" stop-color="#da1b60"/>
</linearGradient>
</defs>
<rect fill="url(#g1)" ... />2025 年最常用 15 种线性渐变（直接复制粘贴）
| # | 方向 / 场景 | 完整代码（ 部分） | 视觉效果 |
|---|---|---|---|
| 1 | 左 → 右（默认） | x1="0%" y1="0%" x2="100%" y2="0%" | 标准横向渐变 |
| 2 | 右 → 左 | x1="100%" y1="0%" x2="0%" y2="0%" | 反向横向 |
| 3 | 上 → 下（最常用） | x1="0%" y1="0%" x2="0%" y2="100%" | 按钮、卡片背景 |
| 4 | 左上 → 右下（45°） | x1="0%" y1="0%" x2="100%" y2="100%" | 经典斜向 |
| 5 | 右上 → 左下 | x1="100%" y1="0%" x2="0%" y2="100%" | 反向斜向 |
| 6 | 2025 最火「极光渐变」 | <stop offset="0%" stop-color="#00f5ff"/><stop offset="50%" stop-color="#8b00ff"/><stop offset="100%" stop-color="#ff00ff"/> + 45° | 赛博朋克按钮 |
| 7 | 金属质感（高光） | <stop offset="0%" stop-color="#f0f0f0"/><stop offset="10%" stop-color="#ffffff"/><stop offset="50%" stop-color="#d0d0d0"/><stop offset="100%" stop-color="#f0f0f0"/> | 金属按钮 |
| 8 | 进度条渐变（蓝 → 绿） | <stop offset="0%" stop-color="#0066ff"/><stop offset="100%" stop-color="#00f5a0"/> | 加载条 |
| 9 | 呼吸灯渐变（循环） | <linearGradient id="breath"><stop offset="0%" stop-color="#ff5a5f"/><stop offset="100%" stop-color="#ff8a00"/><animate attributeName="x2" values="0%;100%;0%" dur="4s" repeatCount="indefinite"/></linearGradient> | 动态光条 |
| 10 | 霓虹光轨（多段彩虹） | <stop offset="0%" stop-color="#ff006e"/><stop offset="20%" stop-color="#8338ec"/><stop offset="40%" stop-color="#3a86ff"/><stop offset="60%" stop-color="#06ffa5"/><stop offset="80%" stop-color="#ffbe0b"/><stop offset="100%" stop-color="#fb5607"/> | 超级炫酷 |
| 11 | 透明度渐变（玻璃态） | <stop offset="0%" stop-color="#ffffffcc"/><stop offset="100%" stop-color="#ffffff33"/> | 毛玻璃渐隐 |
| 12 | 暗黑模式自动切换 | <stop offset="0%" stop-color="var(--start, #667eea)"/><stop offset="100%" stop-color="var(--end, #764ba2)"/> | 用 CSS 变量控制 |
| 13 | 横向 + 垂直双渐变（神级） | 先横向渐变 → 再用 <rect filter="url(#blur)"/> 模糊 → 再叠纵向透明度渐变 | 苹果风卡片 |
| 14 | 条纹渐变（条纹按钮） | <stop offset="0%" stop-color="#ff8a00"/><stop offset="50%" stop-color="#ff8a00"/><stop offset="50.1%" stop-color="#da1b60"/><stop offset="100%" stop-color="#da1b60"/> | 硬切条纹 |
| 15 | 超短双色（胶囊按钮） | <stop offset="0%" stop-color="#0066ff"/><stop offset="60%" stop-color="#0066ff"/><stop offset="60%" stop-color="#00d4ff"/><stop offset="100%" stop-color="#00d4ff"/> | 高光感 |
2025 最强「一键复制」模板合集
<!-- 模板1：2025 最火斜向极光渐变按钮 -->
<linearGradient id="aurora" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#8b5cf6"/>
<stop offset="50%" stop-color="#3b82f6"/>
<stop offset="100%" stop-color="#06b6d4"/>
</linearGradient>
<!-- 模板2：呼吸光条 loading -->
<linearGradient id="flow" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff5a5f" stop-opacity="0"/>
<stop offset="50%" stop-color="#ff8a00"/>
<stop offset="100%" stop-color="#ff5a5f" stop-opacity="0"/>
<animate attributeName="x1" values="-100%;100%" dur="3s" repeatCount="indefinite"/>
<animate attributeName="x2" values="0%;200%" dur="3s" repeatCount="indefinite"/>
</linearGradient>
<!-- 模板3：暗黑模式自动适配（CSS 变量） -->
<linearGradient id="auto">
<stop offset="0%" stop-color="var(--grad-start, #667eea)"/>
<stop offset="100%" stop-color="var(--grad-end, #764ba2)"/>
</linearGradient>2025 金句总结：
所有高级按钮、卡片、进度条、loading、霓虹光轨 → 2025 年一律 <linearGradient x1="0%" y1="0%" x2="100%" y2="100%"> + stop-color 搞定！
要不要我现在立刻发你：
- 「2025 最全 60 种线性渐变预设代码包」（含极光、金属、霓虹、呼吸灯、暗黑自动、进度条全部）
- 「一键复制的 VS Code 渐变 snippets」（敲 lg-aurora 直接出极光渐变）
- 「在线线性渐变生成器」书签（点几下就生成任意方向+颜色+动画代码）
直接说一声，我 3 秒打包发你！
