SVG Wave Generator Online — Layered Wave Dividers for Section Backgrounds

An SVG wave divider is a vector shape placed between two page sections to replace a flat horizontal edge with a flowing curved transition. Because it is SVG it stays crisp at any size, scales to any width without pixelation, and weighs only a few hundred bytes. It is most often used beneath hero sections, between alternating content bands, and above footers.

Either paste the <svg> markup directly into your HTML at the bottom of a section and position it absolutely against the edge, or use the CSS export, which embeds the wave as a data-URI background-image on a div with a set height. The SVG approach keeps the cleanest DOM and lets you animate the path; the CSS approach keeps your markup tidy for purely decorative dividers.

Amplitude is the height of each crest and trough — higher amplitude means taller, more dramatic waves and low amplitude means a gentle ripple. Wave count is how many complete crests fit across the full width — more waves give a busier, choppier edge and fewer waves give long sweeping curves. Smoothness controls how rounded versus angular the curve appears.

Increasing the Layers slider stacks multiple wave paths of the same color at slightly different vertical offsets and phases, each drawn with a higher fill-opacity. The overlap of semi-transparent shapes creates a tonal, depth-rich ribbon effect popular on modern landing pages — without needing a separate image for each band.

Yes. The CSS tab produces a ready-to-paste rule that embeds the wave as a URL-encoded data-URI in background-image with background-size: cover so it fills its container. This keeps the wave inside your stylesheet with no extra HTTP request and no separate asset to host.

Select the React tab. The tool returns a complete function component with all attributes converted to JSX camelCase — fill-opacity becomes fillOpacity and stop-color becomes stopColor — so it compiles without warnings. Drop it in at any section boundary and recolor or resize it through props or wrapper styles. The same markup works in Next.js, Vite, and CRA.

Give the section position: relative, then add the wave as its last child with position: absolute, left: 0, bottom: 0, width: 100%. The exported SVG uses preserveAspectRatio="none" and width="100%", so it stretches edge to edge and the wave stays flush at any screen size. To overlap the next section, set a fixed SVG height and nudge it with a negative margin or translateY. For a wave that sits on top of the section below, export with the Top edge selected instead.

The export is static, but the SVG animates easily with CSS. The classic effect is a horizontal drift: export a wave wider than its container (or duplicate the path), then add a keyframe that runs transform: translateX(0) to translateX(-50%) on an infinite linear loop so the crests roll sideways. Because each layer is a separate path, give the front and back layers different durations for a parallax water look. You can also animate fill or opacity. Vector paths animate on the GPU and stay crisp at any size — no GIF needed.

An SVG wave is a few hundred bytes of text, scales infinitely without blur, and can be recolored by editing one attribute or animated with CSS. A PNG is many kilobytes, looks soft on high-DPI screens unless you ship a 2x version, and cannot be recolored without re-exporting. For a flat decorative divider, SVG wins on both performance and flexibility.

Yes — it is completely free with no sign-up, watermark, or limit, and all generation happens in your browser, so nothing is uploaded to a server. The tool keeps working offline once loaded, and the SVG you copy is yours to use in personal and commercial projects.