SVG Wave Generator

What an SVG wave is and why designers use it

A wave is that smooth, flowing curve you see separating two sections of a modern website — the colored bottom of a hero banner that dips and rises instead of cutting off in a hard straight line. Building one by hand means writing fiddly SVG path math, so most designers either copy a static asset or skip the effect. This generator produces the SVG for you: pick a style, drag a few sliders, and copy clean, ready-to-paste code. Because the output is SVG (vector), the wave stays razor-sharp at any width, scales to any screen, and weighs almost nothing compared to a PNG.

How the generator builds the curve

Every wave is drawn on a fixed 1440-pixel-wide canvas — a common full-bleed design width — and the SVG uses preserveAspectRatio="none" so it stretches edge to edge in any container. The shape itself is a filled path: it starts at the bottom-left corner, traces the wavy top edge across, then closes down the right side and along the bottom, producing a solid block with a decorative top. The five styles draw that top edge differently:

• Smooth uses cubic Bézier curves that alternate crest and trough for a soft, classic wave.
• Sharp uses straight line segments, creating angular peaks like a mountain silhouette.
• Jagged generates an irregular, spiky edge from a deterministic sine-based pattern, so it looks random but renders the same every time.
• Double packs two curves into each cycle for a busier, ribbon-like ripple.
• Layered stacks multiple translucent waves to suggest depth.

The controls, explained

Four sliders shape the result. Amplitude (5–150px) is the height of the crests — how dramatic the wave is. Frequency (1–10) is how many full waves fit across the width; more waves means a tighter ripple. Height (40–300px) sets the overall vertical size of the SVG block. Layers (1–3) stacks additional offset copies at reduced opacity for a sense of depth. You can fill with a solid color or enable a left-to-right linear gradient between two colors. Finally, Flip Horizontal mirrors the pattern and Flip Vertical turns the wave upside down — essential when you want the curve at the top of a section rather than the bottom.

A worked example

Click the "Ocean" preset: it sets Smooth style, amplitude 50, frequency 4, height 120, and a sky-blue fill. The preview instantly shows four gentle crests. Now raise amplitude to 100 and the crests grow tall and bold; drop frequency to 2 and you get two wide, sweeping rolls instead of four tight ones. Turn on the gradient with a second teal color and the fill flows from blue to teal across the width. Hit Copy CSS and you receive something like background-image: url("data:image/svg+xml,..."); — the entire wave encoded inline as a data URI, no separate file to host. Or hit Copy SVG to drop the markup straight into your HTML, or Download SVG to save wave.svg.

Practical use cases

• Section dividers. Place a wave between a hero and the next section so colors transition with a flowing edge instead of a flat line.
• Hero and footer backgrounds. Use a flipped wave at the top of a footer to echo the header.
• CSS backgrounds. The data-URI export drops a wave into any element's background-image with zero extra HTTP requests.
• Email and slide decks. The downloadable SVG works as a lightweight decorative graphic anywhere SVG is supported.

Tips for clean results

• Match the fill to your adjacent section. A wave reads as a divider only when its color equals the section it borders. Set the fill to the next section's background and the curve becomes the seam between them.
• Use Flip Vertical for top dividers. The path is drawn anchored to the bottom; flip it vertically to hang the curve from the top of a block.
• Keep frequency low for big banners. One or two wide waves look elegant across a full-width hero; high frequencies suit thin accent strips.
• Prefer the CSS data-URI for backgrounds, the SVG element for inline content. The data URI keeps everything in one stylesheet rule; the raw SVG element is easier to animate or recolor later.

Common mistakes

• Forgetting the SVG stretches. Because of preserveAspectRatio="none", a wave squeezed into a narrow container will look horizontally compressed. Let it span the full width it was designed for.
• Over-layering. Three layers at low opacity can muddy the color. If depth looks murky, drop to one or two layers.
• Mismatched gradient direction. The gradient runs left to right; if you want a vertical fade you'll need to edit the exported markup, since the generator produces a horizontal gradient by design.
• Pasting SVG where only an image URL is allowed. Some platforms accept only an image file, not inline markup — in that case use Download SVG and upload the file instead of copying the code.