SVG 滤镜效果生成器

选择滤镜类型(模糊 blur、投影 drop-shadow、发光 glow),设置模糊量、颜色与滤镜 ID,工具会生成一段可粘贴的 SVG <filter> 定义代码,可在 SVG 或 HTML 中通过 filter: url(#id) 应用。全部在浏览器本地完成。

滤镜设置 等待输入

投影与发光效果会使用所选颜色;ID 需以字母或下划线开头。

生成结果
类型—
模糊量—
设置参数后点击生成,SVG 代码将显示在这里。

生成的 SVG 需置于页面中,再通过 filter: url(#id) 引用;结果仅供参考。

使用说明
  • <feGaussianBlur> 对图形做高斯模糊。
  • <feDropShadow> 为图形添加投影。
  • 发光效果可用零偏移的投影实现,即 dx=0 dy=0。
  • 滤镜需放在 <defs> 中并通过 id 引用。
  • 通过 filter: url(#id) 应用到元素上。