ZumaTools

SVG Wave Generator

Create smooth section-divider waves, preview them live, and export the SVG code or file.

Seed 4271

SVG code
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#2563eb" fill-opacity="0.6" d="M0 169.7 C115.2 169.7 172.8 168 288 168 C403.2 168 460.8 149.7 576 149.7 C691.2 149.7 748.8 114.7 864 114.7 C979.2 114.7 1036.8 166.1 1152 166.1 C1267.2 166.1 1324.8 124.9 1440 124.9 L1440 320 L0 320 Z"/><path fill="#2563eb" d="M0 142.8 C115.2 142.8 172.8 146.4 288 146.4 C403.2 146.4 460.8 212.2 576 212.2 C691.2 212.2 748.8 159.9 864 159.9 C979.2 159.9 1036.8 176.4 1152 176.4 C1267.2 176.4 1324.8 133.2 1440 133.2 L1440 320 L0 320 Z"/></svg>
CSS background usage
.wave {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20320%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.6%22%20d%3D%22M0%20169.7%20C115.2%20169.7%20172.8%20168%20288%20168%20C403.2%20168%20460.8%20149.7%20576%20149.7%20C691.2%20149.7%20748.8%20114.7%20864%20114.7%20C979.2%20114.7%201036.8%20166.1%201152%20166.1%20C1267.2%20166.1%201324.8%20124.9%201440%20124.9%20L1440%20320%20L0%20320%20Z%22%2F%3E%3Cpath%20fill%3D%22%232563eb%22%20d%3D%22M0%20142.8%20C115.2%20142.8%20172.8%20146.4%20288%20146.4%20C403.2%20146.4%20460.8%20212.2%20576%20212.2%20C691.2%20212.2%20748.8%20159.9%20864%20159.9%20C979.2%20159.9%201036.8%20176.4%201152%20176.4%20C1267.2%20176.4%201324.8%20133.2%201440%20133.2%20L1440%20320%20L0%20320%20Z%22%2F%3E%3C%2Fsvg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

Waves are generated locally in your browser — nothing is uploaded.

How it works

  1. Adjust the complexity, amplitude and smoothness sliders until the wave shape looks right, and pick a color.
  2. Add up to three layers for depth, flip the wave vertically if it sits at the top of a section, or press Randomize for a new shape.
  3. Copy the SVG code, download the .svg file, or grab the CSS background snippet and paste it into your project.

Frequently asked questions

How do I add an SVG wave divider between two sections?
Paste the copied SVG code directly into your HTML just before the next section, or save the .svg file and reference it as a CSS background-image. Set the SVG or its container to width 100% so it stretches edge to edge, and match its fill color to the section below it for a seamless transition.
What does the Randomize button actually change?
Randomize picks a new numeric seed, and the wave heights are generated deterministically from that seed. The same seed with the same slider settings always produces the exact same wave, so you can note the seed number and reproduce a shape you like at any time.
Will the generated wave scale to any screen width?
Yes. The SVG uses a viewBox with preserveAspectRatio set to none, so it stretches to fill whatever width and height you give it without cropping. This is the standard approach for responsive hero dividers and works in all modern browsers.
Is anything uploaded to a server?
No. The wave path, the preview and the exported files are all computed with JavaScript in your browser tab. Nothing you generate leaves your device, and the tool keeps working offline once the page has loaded.
How do the layers work and can each have its own color?
Each layer is a separate path in the same SVG, drawn with the same base color at decreasing opacity, which creates a natural depth effect over any background. If you want fully independent colors per layer, generate the SVG and edit the fill attribute of each path in the exported code.

About this tool

This tool generates decorative wave shapes as clean, ready-to-use SVG code — the kind of curved dividers you see between the hero section and the content below it on modern landing pages. Instead of drawing paths by hand in a vector editor, you shape the wave with a few sliders: complexity controls how many peaks and valleys appear, amplitude controls how tall they are, and smoothness blends the wave from sharp polygon edges into soft flowing curves.

Everything runs client-side in your browser. Wave heights come from a seeded pseudo-random generator, so each shape is reproducible: the seed shown under the preview fully determines the result together with your slider settings. Pressing Randomize simply draws a new seed, which makes exploring variations feel controlled rather than chaotic. The output is a compact SVG with cubic Bézier segments and preserveAspectRatio="none", so it stretches responsively across any viewport width. No account, no upload, no watermark.

Typical uses include hero-to-content dividers, section transitions in marketing sites, email header graphics, slide backgrounds, and placeholder art in design mockups. The layers option stacks up to three waves with decreasing opacity, giving an inexpensive sense of depth that flat single-path dividers lack. The flip toggle mirrors the shape vertically for waves that hang down from the top of a section instead of rising from the bottom.

A practical tip: set the wave fill to exactly the background color of the adjacent section so the two surfaces read as one continuous shape. For crisp rendering, prefer inlining the SVG in your HTML over using it as an image — inline paths scale losslessly and can be recolored later with a one-line edit. The CSS snippet the tool provides uses a URL-encoded data URI, which avoids an extra network request entirely.

Related tools