SVG Wave Generator

Design a wave, layered wave, zigzag, curve, tilt, arrow, step or blob edge, see it where two page sections meet, then copy it as optimised inline SVG, plain CSS, Tailwind CSS 4 or Bootstrap 5. Start from one of 16 presets or build your own.

Every shape uses whole-number coordinates and the shortest path commands, so the code stays small. A seed makes random shapes repeatable, the animated option loops seamlessly and stays still for people who ask for reduced motion, and the link keeps your settings so you can share them or come back later.

How to use it

1. Pick a preset that is close to the look you want, or choose a shape type: wave, layers, peaks, curve, tilt, arrow, steps or blob.
2. Set the height and amplitude, then the number of waves, peaks, steps or points. Add randomness and press New seed until the edge looks right; the same seed always draws the same shape.
3. Under Placement and colour, enter the colours of the section above and the section below and choose whether the divider sits at the bottom or the top of its section. Flip it horizontally or vertically, or switch to a gradient fill.
4. Check the join at full, tablet and phone width, turn on height scaling for narrow screens, and turn on the animation if you want the shape to drift.
5. Open the SVG, CSS, Tailwind 4 or Bootstrap 5 tab, set a class prefix, and copy the code or download the .svg file.

How SVG section dividers work

A section divider is a shape that sits on the edge where two sections meet. It is filled with the colour of the neighbouring section, so the straight line between the two blocks turns into a wave, a slope or a point. Nothing is cut out of the section itself: the shape simply covers part of it.

The shape is one SVG path. Its edge is drawn across the top, and the path closes along the bottom and the two sides, so everything under the edge is filled. A wave is a row of cubic Bézier curves through evenly spaced crests and troughs, peaks and arrows are straight lines, and steps are short horizontal runs joined by rounded corners.

Layered waves stack two to four paths. The back layers sit higher, are shifted sideways and are drawn with lower opacity, so they show through as softer bands behind the front wave. Because they share one fill colour, they always match the section they lead into.

Placing a divider between two sections

Give the section that holds the divider position: relative, then place the divider inside it with position: absolute, left: 0, width: 100% and bottom: 0 (or top: 0 for a divider at the top). Add padding on the same side, as tall as the divider, so your text and buttons stay clear of the shape.

Fill the divider with the colour of the section on the other side of the join. For a divider at the bottom of a blue hero that leads into a white section, the shape is white. The generated code moves the divider 1px past the edge, which hides the thin line of the section's own colour that some browsers show at certain zoom levels.

If you would rather not add markup, use the pseudo-element version. The same SVG becomes a data URI in background-image on ::after (or ::before for a divider at the top), and the section needs no extra element. Tailwind CSS can use the same data URI in a bg-[url(…)] class.

Responsive scaling with viewBox and preserveAspectRatio

The viewBox gives the shape its own coordinate system: 1440 units wide and as many units tall as the height you chose. The SVG element itself is set to width: 100% and the height of its wrapper, so the browser maps those units onto whatever box the divider ends up in.

By default an SVG keeps its proportions and leaves empty space when the box has a different shape. preserveAspectRatio="none" turns that off and stretches the drawing to fill the box exactly. A divider then spans the full width at any screen size while its height stays where you set it.

On a phone a 120px divider can look heavy, because the waves get squeezed together but stay just as tall. Tick Scale the height on narrow screens and the code uses height: clamp(48px, 8.33vw, 120px): the height follows the screen width below 1440px but never drops under 40% of the full height.

Accessibility and file size

A divider is decoration, so screen readers should skip it. The generated markup puts aria-hidden="true" on the wrapper, which hides the SVG and everything inside it; role="presentation" on the svg element is an alternative. Do not add a title or an alt text that describes the shape. The pseudo-element version is never read out, because CSS backgrounds are not part of the accessibility tree.

The animated option moves the shape slowly sideways in a seamless loop. It sits inside @media (prefers-reduced-motion: no-preference), or motion-safe: in Tailwind, so it stays still for people who have asked their system for less motion. Keep the loop slow, and do not place moving dividers right next to text that people need to read.

Coordinates are rounded to whole numbers, each segment uses the shorter of the absolute and relative commands, repeated commands are left out and smooth curves use the S shorthand. A two-wave divider takes about 190 bytes, and the tool shows the exact size of the SVG and of the data URI as you edit.

Use it with our free components: CSS dividers · Hero sections · Background patterns

Frequently asked questions

More free tools

• CSS Gradient Generator – Linear, radial and conic gradients with draggable colour stops and OKLCH blending.
• Glassmorphism Generator – Frosted glass with a live contrast check against the busiest part of your background.
• CSS Box Shadow Generator – Layered, smooth and neumorphic shadows with a live preview.