SVG Wave Divider Generator

SVG wave dividers: the section separator of modern landing pages

Hard horizontal rules between sections feel dated. Since around 2018, web design has shifted to section dividers — sweeping curves, tilted lines, peaks and zigzags that bridge one background colour to the next. The most popular shape is the wave, and SVG is the right medium: a single inline path weighs less than 1 KB, scales to any width without blur and inherits the page's currentColor for instant dark-mode support.

Anatomy of a divider

A clean divider lives at the foot of a section (or, flipped, as a hat on the next one). Three knobs decide the look:

• viewBox — a wide aspect like 0 0 1440 100 gives a single smooth cycle on a desktop hero.
• preserveAspectRatio="none" — lets the SVG stretch to whatever width the container has without distortion artifacts that matter for decorative shapes.
• transform="scaleY(-1)" — the standard trick to flip a foot-divider into a hat-divider without redrawing the path.

<svg viewBox="0 0 1440 100" preserveAspectRatio="none" aria-hidden="true">
  <path d="M0,40 C360,90 1080,-10 1440,40 L1440,100 L0,100 Z" fill="#3b82f6"/>
</svg>

Variants you will actually use

• Smooth wave — the safe, "friendly SaaS" default; one cubic Bézier per cycle.
• Tilted wave — single descending diagonal with a curl; feels cleaner and more editorial.
• Peaks / mountain — sharp triangles for outdoorsy or tech-aggressive brands.
• Zigzag / chevron — playful, works well with bold flat colour blocks.
• Layered (2-3 paths) — stack 2-3 versions of the same wave with reduced opacity to fake depth without raster gradients.

Tools and ecosystem

Inside the same niche you will find shapedivider.app (the most popular), getwaves.io (Z Creative Labs) and haikei.app, all generators that produce inline SVG you can paste straight into a template. The generator on this page focuses specifically on the section-divider use case — exporting a path sized to 100vw with the correct rectangle at the bottom so the colour fills cleanly to the edge of the next section.

Performance and accessibility

An inline divider compresses to under 500 bytes gzipped, beating every PNG/JPG equivalent. Mark it aria-hidden="true" and role="presentation" so screen readers skip it — decorative geometry has no semantic value. For print stylesheets, hide dividers entirely (@media print { .divider { display: none; } }) — they waste ink and clutter the page. If you want a subtle parallax effect, animate transform: translateY() on scroll; avoid animating the d attribute, which forces a path recomputation each frame.

FAQ

What is a sensible height? Between 80 and 150 px at desktop. Taller than 200 px eats too much content space; shorter than 60 px is barely visible.

Can the colour follow my dark-mode theme? Yes — set the path's fill to var(--section-bg-next) and the divider tracks whatever CSS variable controls the next section's background.

How many layered paths is too many? Three is the sweet spot. Four or more usually muddies the silhouette without adding visible depth.

How does this differ from a generic wave-shape generator? A generic shape generator outputs an isolated wave you place anywhere. This divider generator outputs a path sized and closed to act as the boundary between two background colours — including the lower rectangle that fills down to the next section.