SVG Wave Generator

How to use

1. 1Pick a preset like Ocean, Sunset, or Page divider to start from a polished layout.
2. 2Adjust the canvas width, height, and wave position (top or bottom of the surface).
3. 3For each layer pick a color, opacity, amplitude, complexity, and phase. Add layers for a stacked look or remove layers for a minimal one.
4. 4Click Reseed on a layer or Randomize on the toolbar to get a new organic curve at the same shape settings.
5. 5Use Copy SVG, Copy CSS, or Download SVG to drop the wave into your project as inline markup, a CSS background, or a standalone file.

About this tool

SVG Wave Generator builds the layered wave shapes that designers use for section dividers, hero footers, and decorative card backgrounds. Each wave is a cubic Bezier path drawn from a small set of inputs: a width and height that set the viewBox, an amplitude that controls the peak height as a percent of the layer, a complexity value that sets how many crests appear across the width, a phase that shifts the wave left or right, and a seed that drives a small deterministic PRNG so the control points get a touch of organic wobble. Up to four layers stack on top of a solid or transparent background with per-layer color, opacity, and position (top or bottom of the surface). The same seed always renders the same wave, so the look you settle on stays reproducible even after a refresh, and the Randomize button reseeds every layer at once when you want a fresh take. Output is generated three ways: a clean SVG document with viewBox stretching cleanly across any container width, a CSS background-image data URI that drops onto any element without extra files, and a ready HTML snippet wrapped in a positioned container for use as a section divider. Presets cover the most common patterns: Ocean for a layered blue footer, Sunset for warm hero gradients, Stacked layers for the dense purple wave look used on modern marketing sites, Minimal top for a single accent wave at the top of a section, Calm for a gentle single curve, and Page divider for a transparent slab that sits between two sections. The viewBox uses preserveAspectRatio='none' so the wave stretches to whatever width its container takes, which matches how section dividers behave in production. Everything runs in your browser, so colors, sizes, seeds, and the SVG output are never uploaded.

Free to use. Works in your browser. No signup, no login.