SVG Wave Generator
Create smooth SVG wave shapes and section dividers. Tune layers, amplitude, solid or gradient fill, flip, then copy the SVG or export SVG / PNG.
What is an SVG wave divider?
A wave divider is a filled SVG shape with a smooth, curved top edge used to separate page sections — the soft transition you see between a coloured hero and the white content below it. Because it's a single vector path it scales edge-to-edge on any screen with no blurring and almost no page weight.
This generator stacks several seeded sine harmonics, smooths them with a Catmull-Rom spline, and layers translucent copies for depth — the same seed always reproduces the same wave.
Controls
- Layers: stacked waves at increasing opacity for a parallax / depth feel. One layer = a clean single divider.
- Amplitude: wave height. Low = subtle ripple; high = bold, dramatic curves.
- Fill: a flat colour or a two-stop linear gradient.
- Flip: mirror vertically so the wave reads as a bottom-of-section divider instead of a top one.
Dropping it into a page
The SVG uses preserveAspectRatio="none" so it stretches full-width like a real divider. Inline the markup at a section boundary, or set it as a CSS background-image data URI. Place it absolutely at the bottom of the upper section (position:absolute; bottom:0; width:100%) and match its fill to the next section's background.
SVG vs a PNG image
A wave is one path — tiny, infinitely scalable, recolourable with CSS, and animatable. A PNG of the same wave is many times larger, blurs when stretched across wide viewports, and can't adapt to a theme change. Export the PNG only when a non-vector pipeline needs it; otherwise inline the SVG.