Generate smooth SVG wave dividers in seconds. Tune the waves, colours and size, preview the result, then copy the SVG code — free and private.
Paste the SVG between page sections — it scales to the full width of its container.
How to Use
- Tune the wave cycles, amplitude, position and height.
- Pick wave and background colours, and add layers for depth.
- Preview the divider live above the controls.
- Press Copy SVG and paste it into your page.
Key Features
- Live SVG preview — see the wave as you tune it.
- Layered waves — up to three overlapping waves for depth.
- Flip option — mirror the wave for footers or headers.
- Copy-ready SVG — responsive code that scales to any width.
- 100% private — everything runs in your browser; nothing is sent or stored.
FAQs
How do I use the SVG?
Paste the copied code where you want the divider — typically between page sections. It scales to the full width of its container.
Can I change the colours later?
Yes. Edit the fill attribute for the wave colour, or regenerate with new colours here.
Is the SVG responsive?
Yes. The viewBox and percentage width make it scale smoothly to any screen size.
Is my data sent anywhere?
No. Everything runs in your browser and never transmits or saves your choices.
Related Tools
SVG Shape Generator · CSS Gradient Generator · CSS Pattern Generator · CSS Animation Generator