怎么把波浪放在网页区块的底部？

选“底部”位置，导出 SVG 后放在区块末尾并设置 display:block、width:100%，或复制 CSS 作为伪元素的背景。波浪默认使用 preserveAspectRatio="none"，会随容器宽度横向拉伸铺满；需要放在下一个区块顶部时选“顶部”。让填充色与相邻区块的背景色一致，过渡就会很自然。

随机种子有什么用？

所有随机性都来自种子：同样的参数和种子永远生成同一个图形，方便记录、复现和与同事共享。点“换一个”会随机换种子，看到满意的造型时把种子数字记下来即可。

坐标精度怎么选？

精度是路径坐标保留的小数位数。0 位文件最小，在常见尺寸下肉眼几乎看不出差别；需要放大到很大尺寸或做精细描边时再用 1～2 位。输出时还会去掉前导零和多余的空格，进一步减小体积。

CSS 背景和直接插入 SVG 有什么区别？

CSS 背景把 SVG 编码为 data URI 写进样式表，不需要额外请求，适合纯装饰；但不能单独修改其中的颜色。内联 SVG 或 React 组件可以用 CSS、props 控制，也能做动画。图案纹理导出为 CSS 时会设置 repeat 平铺。

🌊

🌊SVG 波浪生成器 - Blob、图案纹理、层叠山峰，导出 SVG/CSS

网页的 Hero 区块底部常用一条波浪分割线，卡片背后放一团柔和的 Blob，空白区域铺一层圆点或等高线纹理——这些装饰图形用 SVG 做最清晰、体积也最小。这个工具可以生成四类图形：波浪支持 1～6 层叠加，可调振幅、波峰数、随机程度，线型有平滑、尖角、阶梯三种，可放在顶部或底部；Blob 由若干控制点围成平滑闭合曲线，可调点数（复杂度）和起伏程度，可填充或只描边；图案纹理有圆点、线条、锯齿、棋盘格、六边形，可调单元大小、粗细和旋转角度，还有基于噪声场用 marching squares 算出的等高线（地形图）纹理；层叠山峰用分形噪声生成多层山脊，由远及近渐变着色。所有图形都可以选双色渐变或纯色、透明或纯色背景、任意画布尺寸。图形完全由随机种子决定，同样的参数和种子总是得到同一个结果，换种子就换一个造型。路径坐标按你选择的精度取整、去掉多余的零，输出的 SVG 很精简；可以下载 SVG 或 1～3 倍 PNG，复制可直接用于 background-image 的 CSS（URL 编码的 data URI）或带 props 的 React 组件。

免费 · 无需注册 · 浏览器本地处理最后更新：2026-10-26

正在加载工具...

如何使用SVG 波浪与装饰图形生成器

1选择波浪、Blob、图案纹理或层叠山峰，调整层数、振幅、复杂度等参数
2设置颜色、渐变、背景和画布尺寸，点“换一个”尝试不同的随机种子
3下载 SVG / PNG，或复制 CSS 背景、React 组件代码

常见问题

怎么把波浪放在网页区块的底部？: 选“底部”位置，导出 SVG 后放在区块末尾并设置 display:block、width:100%，或复制 CSS 作为伪元素的背景。波浪默认使用 preserveAspectRatio="none"，会随容器宽度横向拉伸铺满；需要放在下一个区块顶部时选“顶部”。让填充色与相邻区块的背景色一致，过渡就会很自然。
随机种子有什么用？: 所有随机性都来自种子：同样的参数和种子永远生成同一个图形，方便记录、复现和与同事共享。点“换一个”会随机换种子，看到满意的造型时把种子数字记下来即可。
坐标精度怎么选？: 精度是路径坐标保留的小数位数。0 位文件最小，在常见尺寸下肉眼几乎看不出差别；需要放大到很大尺寸或做精细描边时再用 1～2 位。输出时还会去掉前导零和多余的空格，进一步减小体积。
CSS 背景和直接插入 SVG 有什么区别？: CSS 背景把 SVG 编码为 data URI 写进样式表，不需要额外请求，适合纯装饰；但不能单独修改其中的颜色。内联 SVG 或 React 组件可以用 CSS、props 控制，也能做动画。图案纹理导出为 CSS 时会设置 repeat 平铺。