Make the wavy edge that sits between two sections of a landing page. Choose how tall the wave is, how many peaks it has and its colour, and the tool writes the SVG shape plus a CSS rule that uses it as a background. This page does not draw a preview; the settings below explain what each one does to the shape so you can adjust it, then paste the code into your page and look.
Height sets the box. Depth decides how much of that box the wave uses, so a high depth gives dramatic swells and a low depth gives a gentle ripple. Peaks sets how many crests there are across the full width; because the box scales to the screen, a phone shows the same number of crests in a narrower space and the wave looks steeper.
Random style places each anchor point at a random height between the crest and the trough, then smooths the curve through them. It looks more natural than a regular sine shape. The seed picks one particular random sequence, so keep the number once you like the result.
Place the divider as its own empty block between two sections, give it the CSS rule, and make sure the section above has the colour that shows through the gaps. A common mistake is to leave a thin gap of white between the divider and the next section; set the block's margin to zero and, if a hairline still shows, overlap the blocks by one pixel with a negative margin.
Check the divider on a narrow screen. With the same height and a narrow width, the slopes get steeper, and a wave that looks relaxed on a desktop can look jagged on a phone. If so, lower the number of peaks or raise the height.
The shape is one SVG path. The tool places evenly spaced points across a 1440 unit wide box, alternating between a high and a low position, and joins neighbours with cubic Bezier curves whose handles sit halfway between the points. That makes a smooth S-shaped curve with no corners.
Depth is the distance between the highest and lowest points of the wave, as a percentage of the total height. A 100 pixel box at 50% depth has a wave that moves 50 pixels up and down, leaving 10% of the height as a margin at the bottom.
The SVG uses preserveAspectRatio set to none and the CSS sets the background size to 100% by 100%, so the shape fills whatever width the section has. The height stays at the value you chose.
The inline SVG is easiest to recolour later and to animate. The CSS version keeps the HTML clean because the shape lives in the stylesheet, and screen readers ignore it. Both draw the same wave.
It is the SVG code written directly into a web address, so the browser needs no separate file. The characters that would break the address, such as the angle brackets and the hash sign, are replaced with percent codes.
Related: SVG wave generator with live preview, dividers and blobs, CSS gradient generator, CSS shadow generator, Hex colour picker.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.