SVG 渐变生成器

选择渐变类型(线性 / 径向)、起止颜色、方向与渐变 ID,工具会生成一段可粘贴的 SVG 渐变定义代码(<linearGradient> 或 <radialGradient>),可在 SVG 中通过 fill="url(#id)" 引用。全部在浏览器本地完成。

渐变设置 等待输入

ID 需以字母或下划线开头;方向仅对线性渐变有效。

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

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

使用说明
  • <linearGradient> 通过 x1,y1,x2,y2 定义渐变方向。
  • <radialGradient> 以圆心向外的方向渐变。
  • 每个渐变包含两个 <stop>,分别设置 offset 与颜色。
  • 渐变需放在 <defs> 中,通过 id 被引用。
  • 使用 fill="url(#id)" 或 stroke="url(#id)" 应用渐变。