Section dividers with a soft edge.

In depth

What a wave divider has to get right.

The job a divider does

A section divider marks where one band of a page ends and the next begins. A straight border does that in one pixel; a wave does it with a shape, which reads as a deliberate transition rather than a rule. The important detail is that the divider belongs to a boundary between two colors, so it has exactly one job: carry the color of one section into the other.

That is why the fill matters more than the curve. Set the wave's fill to the background color of the section it points into and the divider disappears into the layout, leaving only the curved edge. Set it to a third color and you have added a stripe, which is a different design decision and usually an accident. The generator keeps the fill on the same panel as the shape controls for exactly this reason: they are not independent choices.

Points and Amplitude set the character. Three to five points across 1440 units gives one long swell that reads at any screen size. Ten or twelve gives a ripple, effective at 160 units tall and noisy at 480. Amplitude should come down as the point count goes up, because the peaks crowd together and the eye reads steepness rather than height.

Stretching the curve across any width

The 1440-unit grid is a ratio, not a measurement. An SVG normally preserves that ratio, letterboxing itself inside a wider container, which for a divider is wrong: you want the wave to span the full viewport whatever its width, and you want the height to stay exactly what you set. That is what preserveAspectRatio="none" does. It tells the browser to scale the x and y axes independently to fill the box, so a 1440 by 240 wave stretched across a 2560-pixel screen stays 240 pixels tall and simply gets wider.

The distortion that comes with it is the point rather than a defect. A wave stretched horizontally flattens on a wide monitor and steepens on a phone, which is close to what you would draw by hand for each. It only matters if the shape carries detail that has to keep its proportions, which a wave does not.

Inline markup and a CSS background behave differently here. Inline, the svg element takes width: 100% and the height you chose, and preserveAspectRatio does the work. As a background image the equivalent is background-size: 100% 100%, which stretches the image to the box in the same way; cover would crop it instead. The export sets these for you.

Layers, flipping and placement

Layers draws the same curve two or three times, each copy offset and set at a lower opacity than the one in front. The effect is a soft band of related edges instead of one hard line, which suits a large hero and reads as depth. Keep the layer count at one when the divider is short: at 160 units the copies overlap too closely to separate, and the only result is a muddier color. Because every layer shares the same fill, a gradient stays consistent across the stack.

Flip decides which side of the curve is solid. Unflipped, the curve runs along the top of the box and the fill hangs below it, so the divider reaches down into the section beneath. Flipped, the curve sits at the bottom and the fill rises above it, which is what you want when the wave closes the section above. Getting this wrong is the most common mistake with dividers, and the giveaway is a thin strip of the wrong color between the wave and the content.

Placement is the last piece. A divider is usually an element at the end of one section or the start of the next, with the two flush against each other. A small negative margin on the side that meets the content closes any subpixel gap at fractional zoom levels: about -1px is enough. Set display: block on the svg as well, since an inline element picks up a few pixels of line-height underneath it and produces the same stripe you were avoiding.

Size and performance

A wave is a handful of numbers, so the file is small: a single path with three to twelve curve commands, a viewBox and a fill, usually well under a kilobyte before compression. Layers multiply that by two or three and a gradient adds a defs block, and the result is still smaller than any image of the same divider. Choosing more points costs a few bytes each, so the shape you like is almost always the shape you can afford.

The choice between inline markup and a CSS background is about control rather than weight. Inline, the fill can come from a custom property and follow a dark theme, and the path can be targeted from CSS. As a background image the markup stays clean, but the fill is baked into the data URI, so a theme switch means a second rule. For one light palette the background route is simpler; for anything themed, paste the markup.

Either way the divider is decoration, so keep it out of the accessibility tree: aria-hidden on inline SVG, an empty alt on an img, nothing at all for a background image. And avoid animating the path itself. If a divider has to move, translate the whole element slowly instead, which the browser can composite rather than repaint.