SVG Wave Background Generator
Build a wavy SVG that smoothly connects sections—tune color, height, and curve, then copy
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
Create a wavy SVG divider that smoothly connects web sections by adjusting only the color, height, curve, and number of waves. Thanks to preserveAspectRatio it stretches to any screen width, so it works right away as a section divider on responsive landing pages.
How to use
- Shape the curve you want with the height, amplitude, and wave-count sliders.
- Pick a color and opacity, and flip the direction with 'Vertical flip' if needed.
- Check the preview, then click the 'Copy SVG' button.
- Paste the SVG code above or below a section to use it as a divider.
FAQ
- Is anything I enter sent to a server?
- No. Adjusting colors and values and generating the SVG code all happen inside your browser, and no data is ever transmitted or stored on a server.
- Does the wave stretch to fit the screen size?
- Yes. The generated SVG includes width=100% and preserveAspectRatio=none, so it stretches horizontally to fit its parent's width. The height stays at the value you set.
- Can I fill it with a gradient?
- Right now it offers solid-color fills. If you need a gradient, replace the fill in the copied SVG by defining a linearGradient inside <defs> and pointing the path's fill to its id.