2025 年 SVG 阴影最全实战手册
一句话总结：CSS box-shadow 已经落伍了，所有高级、彩色、长阴影、内外阴影、动态阴影、3D 立体感 → 2025 年一律用 SVG 滤镜干翻！
2025 年最强阴影神器：<feDropShadow>（一行搞定 99% 需求）
<feDropShadow dx="4" dy="8" stdDeviation="6" flood-color="#00000040"/>| 参数 | 含义 | 2025 最常用值（推荐） |
|---|---|---|
dx | 水平偏移 | 2~8（正值向右） |
dy | 垂直偏移 | 4~16（正值向下） |
stdDeviation | 模糊强度（越大越柔和） | 4（轻柔）→ 12（超柔和长阴影） |
flood-color | 阴影颜色 + 透明度 | #00000030（30% 黑）#ff5a5f60（彩色） |
flood-opacity | 单独控制透明度（可替代上面） | 0.2 ~ 0.6 |
2025 年最常用的 15 种 SVG 阴影（直接复制）
<!-- 1. 2025 标配柔和投影（比 CSS 好看 100 倍） -->
<filter id="soft"><feDropShadow dx="4" dy="8" stdDeviation="10" flood-color="#00000030"/></filter>
<!-- 2. 超长艺术阴影（扁平风最爱） -->
<filter id="long"><feDropShadow dx="10" dy="20" stdDeviation="15" flood-color="#00000020"/></filter>
<!-- 3. 彩色阴影（2025 大火） -->
<filter id="pink"><feDropShadow dx="6" dy="12" stdDeviation="12" flood-color="#ff5a5f50"/></filter>
<!-- 4. 纯白外发光（图标神器） -->
<filter id="white-glow"><feDropShadow dx="0" dy="0" stdDeviation="8" flood-color="#ffffff" flood-opacity="0.9"/></filter>
<!-- 5. 内阴影（凹陷按钮） -->
<filter id="inset">
<feGaussianBlur in="SourceAlpha" stdDeviation="6" result="blur"/>
<feOffset dx="4" dy="4" result="offset"/>
<feFlood flood-color="#00000060"/>
<feComposite in2="offset" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- 6. 多层 3D 立体阴影（电影海报风） -->
<filter id="3d">
<feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="#00000080"/>
<feDropShadow dx="6" dy="6" stdDeviation="6" flood-color="#00000060"/>
<feDropShadow dx="12" dy="12" stdDeviation="16" flood-color="#00000040"/>
<feDropShadow dx="20" dy="20" stdDeviation="30" flood-color="#00000020"/>
</filter>
<!-- 7. 动态呼吸阴影（按钮按下反馈） -->
<filter id="pulse">
<feDropShadow dx="4" dy="8" stdDeviation="8" flood-color="#0066ff60">
<animate attributeName="stdDeviation" values="8;20;8" dur="2s" repeatCount="indefinite"/>
<animate attributeName="flood-opacity" values="0.6;0.2;0.6" dur="2s" repeatCount="indefinite"/>
</feDropShadow>
</filter>
<!-- 8. 霓虹双色阴影 -->
<filter id="neon-shadow">
<feDropShadow dx="0" dy="0" stdDeviation="8" flood-color="#00f5ff"/>
<feDropShadow dx="0" dy="0" stdDeviation="16" flood-color="#ff00ff" flood-opacity="0.6"/>
</filter>2025 最强「一键 Neumorphism 软阴影」组合（复制即用）
<filter id="neu-out">
<feDropShadow dx="8" dy="8" stdDeviation="12" flood-color="#00000030"/>
<feDropShadow dx="-6" dy="-6" stdDeviation="12" flood-color="#ffffff60"/>
</filter>2025 最强「一键卡片」模板（毛玻璃 + 柔和阴影）
<svg width="320" height="200" viewBox="0 0 320 200">
<defs>
<filter id="card" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="12" in="SourceGraphic" result="blur"/>
<feOffset dx="0" dy="0" result="offsetBlur"/>
<feFlood flood-color="#ffffff" flood-opacity="0.8" result="color"/>
<feComposite in="color" in2="offsetBlur" operator="in" result="glow"/>
<feDropShadow dx="6" dy="12" stdDeviation="16" flood-color="#00000030"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="320" height="200" fill="#f0f0f0"/> <!-- 背景图 -->
<g filter="url(#card)">
<rect x="40" y="30" width="240" height="140" fill="#ffffffcc" rx="20"/>
<text x="160" y="100" font-size="32" fill="#333" text-anchor="middle" dominant-baseline="middle">
SVG 卡片
</text>
</g>
</svg>2025 金句总结：
所有阴影、发光、3D、Neumorphism、彩色投影、动态呼吸 → 2025 年一律 <feDropShadow dx="" dy="" stdDeviation="" flood-color=""/> 一行代码秒杀 CSS！
要不要我现在立刻打包发你：
- 「2025 最全 40 种 SVG 阴影特效合集」（含柔和、长影、彩色、内阴影、3D、多层、Neumorphism、霓虹、呼吸全部源码）
- 「一键 Neumorphism + 毛玻璃 + 柔和阴影组件」（支持 React/Vue）
- 「SVG 阴影调试器」在线工具（实时拖拽 dx/dy/stdDeviation 看效果）
直接说一声，我 3 秒发你！
