SVG 滤镜（）2025 终极速查表
10 个最常用 + 最炸裂的滤镜效果，全部一行代码搞定，2025 年前端装逼必备！
| 排名 | 效果名称 | 一行核心代码（复制即用） | 2025 常用场景 |
|---|---|---|---|
| 1 | 高斯模糊（毛玻璃） | <feGaussianBlur stdDeviation="8"/> | 毛玻璃卡片、背景模糊、loading |
| 2 | 投影/阴影 | <feDropShadow dx="4" dy="8" stdDeviation="6" flood-color="#00000040"/> | 所有卡片、按钮、浮层 |
| 3 | 内阴影 | <feDropShadow dx="0" dy="0" stdDeviation="4" flood-color="#00000060" flood-opacity="1"/> + 剪裁 | 凹陷按钮、文字内阴影 |
| 4 | 霓虹/外发光 | <feGaussianBlur stdDeviation="8" result="glow"/><feFlood flood-color="#00f5ff"/><feComposite in="glow" operator="out"/><feMerge> | 赛博朋克文字、按钮、图标 |
| 5 | 描边外发光（最常用） | <feMorphology operator="dilate" radius="3"/><feGaussianBlur stdDeviation="4"/><feFlood flood-color="#fff"/><feComposite in="SourceGraphic" operator="over"/> | 白色/彩色外发光图标 |
| 6 | 胶片噪点 | <feTurbulence type="turbulence" baseFrequency="0.8" numOctaves="2" result="noise"/><feDisplacementMap in="SourceGraphic" scale="10"/> | 复古海报、电影感背景 |
| 7 | 水波纹/液体感 | <feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="4" seed="5"><animate attributeName="baseFrequency" values="0.03;0.04;0.03" dur="8s" repeatCount="indefinite"/></animate></feTurbulence><feDisplacementMap in="SourceGraphic" scale="30"/> | 液体按钮、动态背景 |
| 8 | 熔岩/熔融效果 | <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="4"/><feDisplacementMap scale="40"/><feGaussianBlur stdDeviation="2"/> + 红色渐变 | 熔岩文字、危险按钮 |
| 9 | 3D 立体文字 | 多个 <feDropShadow> 叠加 + dx/dy 递增 | 电影海报、标题 |
| 10 | 胶片划痕 | <feTurbulence type="fractalNoise" baseFrequency="0.02 1.2" numOctaves="3"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/><feComposite operator="in" in2="SourceGraphic"/> | 复古视频、老电影感 |
2025 年最强 5 个“一键复制”滤镜模板（直接粘到 里用）
<!-- 1. 最常用的毛玻璃（2025 标配） -->
<filter id="blur"><feGaussianBlur stdDeviation="12"/></filter>
<!-- 2. 超美投影（比 CSS box-shadow 强 100 倍） -->
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="4" dy="8" stdDeviation="8" flood-color="#00000030"/>
</filter>
<!-- 3. 霓虹发光文字（抖音最爱） -->
<filter id="neon">
<feGaussianBlur stdDeviation="6" result="blur"/>
<feFlood flood-color="#00f5ff" result="color"/>
<feComposite in="color" in2="blur" operator="in" result="glow1"/>
<feGaussianBlur in="glow1" stdDeviation="4" result="glow2"/>
<feMerge>
<feMergeNode in="glow2"/>
<feMergeNode in="glow1"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- 4. 白色外发光（图标最常用） -->
<filter id="glow">
<feMorphology operator="dilate" radius="3"/>
<feGaussianBlur stdDeviation="6"/>
<feFlood flood-color="#ffffff"/>
<feComposite in="SourceGraphic" operator="over"/>
</filter>
<!-- 5. 动态水波纹（2025 最火背景） -->
<filter id="water">
<feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="4" seed="1">
<animate attributeName="baseFrequency" values="0.02;0.025;0.02" dur="10s" repeatCount="indefinite"/>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="30"/>
</filter>使用方法（超简单）：
<rect width="200" height="100" fill="#fff" filter="url(#blur)"/> <!-- 毛玻璃 -->
<text x="100" y="100" font-size="80" fill="#00f5ff" filter="url(#neon)" text-anchor="middle">NEON</text>
<circle cx="60" cy="60" r="50" fill="#ff5a5f" filter="url(#shadow)"/>2025 金句总结：
CSS 滤镜已经过时了，所有高级模糊、发光、水波、熔岩、3D 阴影、复古噪点 → 2025 年一律用 SVG <filter> 干翻一切！
要不要我现在立刻打包发你：
- 「2025 最全 50 个 SVG 滤镜特效合集」（含毛玻璃、霓虹、水波、熔岩、胶片、3D 立体全部源码）
- 「一键复制的 filter 代码片段库」（VS Code snippets，直接敲 f-neon 就出霓虹）
- 「在线 SVG 滤镜实验室」书签（实时拖参数预览）
直接说一声，我 3 秒发你！
