🌊 CSS波浪分隔线生成器
可视化生成SVG波浪分隔线，自定义波峰高度、宽度、颜色和翻转效果。无需注册，一键复制CSS/SVG代码。
零依赖·可离线使用什么是CSS波浪分隔线？
CSS波浪分隔线（Wave Divider）是一种流行的网页设计元素，使用SVG路径在页面不同区块之间创建平滑的波浪过渡效果。本工具提供了可视化编辑器，让您可以实时调整参数并一键生成代码。
核心功能
- 自定义波峰：调整波浪高度（10-200px）和波浪数量
- 多彩配色：自由选择波浪填充色和背景色
- 方向控制：向下、向上或双向波浪
- 水平翻转：镜像波浪方向
- 一键复制：CSS background-image 或内联SVG代码
- 响应式：SVG自适应容器宽度
使用场景
落地页区块分隔、Hero区域底部装饰、页面转场效果、App UI分割线、品牌展示页等。
常见问题
波浪分隔线是用CSS还是SVG实现的？
使用内联SVG实现，可以通过CSS background-image或直接嵌入使用。兼容所有现代浏览器。
可以自定义颜色吗？
支持自定义填充颜色、背景颜色，以及波浪的宽度和高度。您可以使用颜色选择器或直接输入HEX值。
生成的代码怎么用？
复制CSS代码到您的样式表中，或直接复制SVG代码嵌入HTML。波浪分隔线会自动适应容器宽度。
支持响应式吗？
是的，SVG波浪会自动缩放适应父容器宽度，只需设置宽度为100%即可。