为落地页生成平滑的 SVG 波浪分隔 —— 波浪数 / 振幅 / 层数 / 种子可调 —— 上下翻转 —— 导出 SVG 与 CSS —— 浏览器本地
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" width="1440" height="320" preserveAspectRatio="none"><defs><linearGradient id="waveGrad" x1="50%" y1="0%" x2="50%" y2="100%"><stop offset="0%" stop-color="#8b5cf6"/><stop offset="100%" stop-color="#06e6d7"/></linearGradient></defs><path fill="url(#waveGrad)" fill-opacity="1" d="M 0 114.05 C 120 114.05, 120 199.62, 240 199.62 C 360 199.62, 360 122.58, 480 122.58 C 600 122.58, 600 201.36, 720 201.36 C 840 201.36, 840 121.34, 960 121.34 C 1080 121.34, 1080 198.94, 1200 198.94 C 1320 198.94, 1320 114.32, 1440 114.32 L 1440 320 L 0 320 Z"/></svg>
这个工具能做什么
生成几乎每个现代营销区块收尾用的那条平滑波浪边 —— 彩色 hero 区 和下方白块之间那道柔和的弧线,而不是生硬的水平直线。你来设波浪 的波峰数量、调振幅(波浪起得多高)、加不规则度让波峰不再机械 一致,还能叠加最多四层半透明波浪,做出 Linear、Stripe、Framer 这些站点上常见的层叠视差波浪效果。每条波浪都是一条横跨整个宽度、 闭合成填充区域的平滑三次贝塞尔曲线,可以直接放进你的区块当分隔。
形状由一个确定性种子驱动,同一个种子在任何设备上都生成完全一样 的波浪 —— 分享链接能像素级复现,而"重新随机"按钮只是换个新种子。 把整条波浪垂直翻转,就能把"区块底部分隔"变成"hero 顶部分隔"。 填充可以用纯色,也可以用两段式线性渐变,然后两种方式导出:复制 原始 SVG 代码,或复制一段开箱即用的 CSS,把波浪设成内联 data-URI 背景图。你也可以下载独立的 .svg 文件。全部在浏览器本地用带种子的 伪随机数发生器运算(不用 Math.random),所以波浪可复现,你输入的 任何东西都不会离开浏览器标签页。
工具细节
- 输入
- 文件 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 下载
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 14 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
SVG 波浪分隔生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
彩色 hero 区与下方区块之间的柔和分隔
最常见的用法:一条彩色 hero 带过渡到它下面的白色内容区。流程: 波浪数设 2 或 3,振幅约 0.4,不规则度调低(约 0.2)做出冷静的 企业风弧线,关掉翻转,填充色跟 hero 背景一致。复制 SVG,然后把 它绝对定位在 hero 底部,`bottom: 0; width: 100%`,再加一点负 外边距盖住接缝。因为种子就写在代码里,以后品牌色改了你还能重新 生成出一模一样的分隔。
压在 hero 标题下的弧形顶边
想做一条 hero 文字压在上面的彩色带,你需要波浪向上拱进上方区块。 生成波浪后打开翻转,同一个形状就垂直镜像了。把它叠在带子的顶部 `top: 0`。再用同一个种子的非翻转版本放在底部,你就得到一条对称 的彩色丝带 —— 上下边互为镜像 —— 全部出自一个生成的形状。
页脚的层叠视差波浪
那种"海洋"页脚 —— 一个品牌色的几种深浅做成三四层半透明波浪, SaaS 定价页常见。层数设 3 或 4,选渐变填充,工具会把每层用更低 透明度、错开的种子叠在上一层后面,让波峰不对齐。导出 SVG 当页脚 背景。想要会动的页脚,就在 CSS 里给每层 `transform: translateX` 配不同速度,伪造出景深。
功能卡片背后的装饰波浪
与其用平背景,不如导出一条低振幅、很浅色调的波浪,放在一排功能 卡片后面当氛围形状。振幅设约 0.25、不规则度约 0.4,让它读起来 像一条温和的有机带,而不是僵硬的正弦波。因为每次下载都是独立的 .svg,你可以直接把文件交给设计师,或当图片素材丢进 Figma、 Webflow、Framer,完全不用写代码。
多区块页面的配套波浪变体
一个长落地页常常交替排彩色区块,每条接缝都用一模一样的波浪会 显得很机械。锁定波浪数、振幅和层数,然后手动递增种子(种子 2001、2002、2003)。每个种子产出一个独立但调性一致的分隔,而且 种子就记在你的设计 tokens 里,几个月后任何同事都能重新生成出 完全相同的这一组分隔。
常见踩坑
拉伸波浪时忘了 `preserveAspectRatio="none"`。分隔几乎总是横跨 100% 宽度但高度固定,这会扭曲 viewBox。这个工具已经输出了 `preserveAspectRatio="none"`,让波浪边到边拉伸而不是留黑边 —— 如果你手动改代码,记得保留它,否则波浪不肯填满宽度。
接缝处留了一条发丝缝。波浪路径闭合到它自己 viewBox 的底边(或顶边),不是你的区块。如果你把它贴着 `bottom: 0` 放,在某些缩放级别会出现 1px 亚像素缝。用一点负外边距(比如 `margin-bottom: -1px`)推一下,让填充边盖住下面区块的颜色。
把填充色配到错误的区块。底部分隔的波浪填充色必须跟它上方的区块一致(波浪是那个区块向下沉的尾边)。很容易手误配成下方区块的颜色,效果就反了。选填充前先确认这条弧线属于哪个区块。
隐私说明
这个工具的每一部分 —— 带种子的伪随机数发生器、三次贝塞尔波浪路径 运算、SVG 与 CSS 的序列化、data-URI 编码 —— 都是完全在你浏览器标签页 里运行的纯 JavaScript。任何形状、颜色或种子都不会发到服务器,不对你 生成的内容打点,也不记录日志。唯一要留意的隐私点:可分享 URL 会把 当前种子和设置写进 query string,所以你把带着未发布品牌色的分享 链接粘到公开频道时,对方服务器的访问日志会留下这些值。普通波浪无所 谓;涉及保密品牌工作时,手动复制 SVG 比分享 URL 更稳妥。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。