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.

For a horizontal wave (Top or Bottom edge), give the section position: relative, then add the wave as its last child with position: absolute, left: 0, bottom: 0 (or top: 0), width: 100%. The exported SVG uses preserveAspectRatio="none", so it stretches edge to edge and stays flush at any screen size. For a vertical wave (Left or Right edge), use top: 0, bottom: 0, height: 100%, and anchor left: 0 or right: 0 instead — width follows automatically from the aspect ratio.

Tick "Animate (gentle drift)" in the Export options section and the tool bakes a per-layer CSS keyframe animation directly into the exported markup — a subtle alternating translateX sway, with each layer given a slightly different duration for a parallax feel. Because the animation lives inside the SVG's own <style> block, it automatically carries over into the CSS data-URI export too, with zero extra CSS needed. This built-in animation is a gentle side-to-side sway, not a seamless one-directional scroll. For a continuous rolling loop, duplicate the path so it tiles seamlessly and run your own linear translateX(-50%) keyframe by hand.

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 — choose Left or Right instead of Top or Bottom in the Edge section. The generator rotates the same sine-and-Catmull-Rom math onto the vertical axis, so the crests run up and down the container instead of left to right, and the shape closes to whichever side (left or right) you selected. This makes a wavy vertical divider between two side-by-side columns or a decorative sidebar edge, using the exact same sliders as the horizontal wave.

Tick "Multi-color layers" in the Color section and each of the up to 5 active layers gets its own independent color swatch, instead of every layer sharing one solid color or one gradient. This produces a bolder, more varied ribbon effect — for example a teal-to-purple-to-pink gradient of layers rather than one color fading through opacity. Turn the toggle off to go back to a single shared color or gradient.

Yes — the "Decorative (adds aria-hidden)" checkbox is on by default, and the tool bakes aria-hidden="true" directly onto the root <svg> element in every export format. This tells screen readers to skip the divider, which is correct for almost every use case since a wave carries no information that needs to be announced. Untick it only if you have a specific reason for the SVG to be exposed to assistive technology.

Yes. Press Ctrl+Z to undo (Ctrl+Shift+Z or Ctrl+Y to redo) — the tool keeps up to 60 steps of history, debounced so rapid slider drags count as one step. Click the Share button in the header to copy a URL that encodes every setting (shape, edge, colors, animation, and accessibility options); opening that link reproduces your exact design, which is useful for sending a draft to a teammate or saving a favorite configuration as a bookmark.

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.

CSS clip-path reshapes the visible boundary of the element it is applied to — polygon() for angled cuts, or circle()/ellipse()/inset() with a border-radius for smooth curves — which is ideal for cropping a photo, card, or section into a non-rectangular shape. An SVG wave is a separate, filled shape placed as a divider between two sections, purpose-built to render several undulating crests and troughs with tunable amplitude and frequency — something clip-path is not designed for, since it clips one element rather than drawing a new decorative one. Use clip-path to reshape an existing element (try our Clip-path Generator); use an SVG wave when you need a dedicated multi-crest divider band.

No — even a 5-layer wave with high smoothness is only a few kilobytes of path data and renders instantly, since browsers draw SVG paths natively with no JavaScript needed at runtime. Compare that to an equivalent PNG or WebP wave graphic, which is typically 20–100 KB and needs separate 1x/2x/3x versions for different screen densities. The only performance consideration is if you animate many layers at once with heavy filters — plain path fills and CSS transforms stay smooth even on low-end devices.