SVG Wave Generator

Generate smooth, peaked or stepped SVG waves for section dividers — layers, colour, height and randomness.

How do I add a wave divider to a website?

Generate a wave, copy the SVG and place it at the top or bottom of a section (or use the CSS background version). The SVG is a single path with preserveAspectRatio="none", so it stretches to any width while keeping the file tiny.

Tips

Match the wave colour to the next section’s background for a seamless join.
Use 2–3 layers with transparency for a sense of depth.
Change the seed number for a different random shape.

Frequently asked questions

Will it look sharp on retina screens?

Yes, SVG is vector.

How do I flip it?

Tick “Flip vertically”, or rotate it 180° with CSS.

Can I use it commercially?

Yes.