SVG Wave Generator

Layered SVG waves for modern layouts

Wave dividers are a popular way to soften the boundary between two sections of a web page. Instead of a hard horizontal line, a curved edge adds movement and depth to hero banners, footers, pricing tables and landing pages. This SVG wave generator builds those shapes for you. It stacks several translucent or solid layers, each with its own random curve, and blends them between two colors so the result looks like rolling hills or water.

Because the output is plain SVG, it stays sharp at any size, weighs only a few hundred bytes and can be styled, animated or inlined in your HTML. You can also copy it as a CSS background-image data URI, which is convenient when you cannot add extra files to a project.

What the controls change

Layers sets how many overlapping waves are drawn, from a single clean curve to six stacked bands. Amplitude controls how tall the crests and troughs are. Complexity is the number of crests across the width: low values give long lazy swells, high values give a choppy sea. Smoothness controls how the points are joined: at 0% the wave is angular like a zig-zag, at 100% it becomes a rounded curve made of cubic Bézier segments. The fill can be a blend of two solid colors, one per layer, or a horizontal gradient with increasing opacity towards the front.

Using and exporting your wave

Every wave is generated from a numeric seed, so a design is fully reproducible: note the seed and the slider values and you can recreate it later. Use Flip vertically for waves that hang from the top of a section, and enable a transparent background when the SVG should sit on top of another color. Download the SVG for the web, or export a 1440 by 480 pixel PNG for presentations and design tools. When placing the SVG in a page, stretch it to full width and set the section background to match the wave's background color to avoid thin seams. Everything is computed locally in your browser, so there is no upload and no account.