SVG Wave & Section Divider Generator

A decorative edge between page sections. This tool generates a static SVG wave or angular profile that can be used as an image or CSS background.

Add an element with the wave-divider class and apply the CSS. It uses an encoded SVG background, full element width and the selected height. Choose fill colors that fit the adjacent section.

It has a viewBox and is set to stretch without preserving its original aspect ratio. The CSS background stretches to the element’s width/height. Keeping the height fixed changes proportions as width changes; choose an appropriate section height for your design.

It makes variation repeatable. The same seed and settings generate the same anchors and profiles. New variation chooses another seed; variation0 produces the same regular anchors regardless of seed. It does not create animation.

Layers use shifted baselines and their own profile variation. They share a solid fill or horizontal gradient with increasing opacity; the front layer is opaque. Layering can look different when fill direction changes.

Yes. Transparent SVG/PNG reveals the page or image behind unfilled areas. Turn transparency off to include the selected solid background.

Smooth profiles use cubic Bézier segments through anchor points, with bounded control points. Angular profiles join the anchors with straight lines. Amplitude and variation control anchor heights.

320–2,400 pixels wide and 80–1,600 pixels high,2–12 segments and 1–5 layers. SVG remains vector; PNG rasterizes at the selected pixel dimensions.

Save settings JSON and import it here. Version1 files contain the seed, dimensions, colors and profile choices. Imports allow64 KiB and 20,000 characters.

No processing upload or saved design history is needed. Save a settings file to keep the design. Website ads and analytics follow the privacy information.