有条工具

SVG波浪分割线生成器

生成多层波浪 SVG 分割线，用于页面区块过渡

调节波峰数量、波幅、层次数、颜色、平滑度与方向，实时预览并导出格式化的 SVG 代码（viewBox 1440x320），放在页面 section 之间即可做出柔和的背景分割效果，全部在浏览器本地计算。

波浪参数

3
60px
2 层

每层自动使用不同透明度，形成前后景深

50

使用说明

  • • 将 SVG 放在两个 section 之间，设置 display: block; width: 100%，即可作为背景分割
  • • 上层颜色（透明度 1）用于最前层，下层颜色用于背景层次，多层时自动降低透明度
  • • 「波峰朝上」适合作为下一区块的顶部分割；「波峰朝下」适合作为上一区块的底部分割
  • • SVG 已设置 preserveAspectRatio="none"，拉伸宽度时波形会随之铺满

实时预览

上方色块模拟上一个区块的背景，波浪衔接两个区块

SVG 代码

#关于SVG波浪分割线生成器

波浪分割线是网页设计中常用的区块过渡元素：在 Hero 区与内容区、不同背景色的 section 之间插入一条柔和的波浪 SVG，可以让页面节奏更自然，避免生硬的直线切割。本工具基于三次贝塞尔曲线（正弦采样）生成波浪 path，支持多层透明度叠加，导出的 SVG 代码格式化缩进、可直接使用。

典型应用场景

  • 落地页 Hero 与功能介绍区之间的背景过渡
  • 不同配色 section 之间的柔和衔接
  • 页脚顶部的装饰性波浪
  • 海报、Banner 中的海浪、山峦等有机轮廓

常见问题

  • 如何让波浪铺满全宽？给 svg 设置 width: 100%，配合 preserveAspectRatio="none" 即可随容器拉伸。
  • 层次数有什么作用？多层波浪以不同透明度与相位叠加，能形成前后景深，看起来更像自然的海浪。
  • 文件体积大吗？生成的 SVG 只有几个 path，通常在几 KB 以内，对页面性能几乎没有影响。

相关工具推荐

CSS阴影生成器

可视化生成CSS阴影效果，支持box-shadow和text-shadow

热门 新品 本地

Logo制作器

使用几何图形组合设计专业Logo

热门 新品 本地

CSS渐变生成器

可视化生成CSS渐变代码，支持线性、径向和锥形渐变

热门 新品 本地

CSS动画生成器

可视化编辑CSS关键帧动画，实时预览和代码生成

热门 新品 本地

CSS边框生成器

生成CSS边框样式，支持圆角、虚线、图片边框等

热门 新品 本地

图案生成器

生成可重复的背景图案，支持多种样式和自定义参数

热门 新品 本地
探索全部工具