SVG Wave Generator
Smooth wavy section dividers โ layered, tintable, copy or download.
About this generator
Roll waves, steer them with three sliders โ amplitude, complexity, layers โ pick the colour, flip for top-or-bottom edges, and take the result as inline SVG or a file. Layered translucent copies give the depth effect every SaaS landing page wears.
Using dividers properly
The wave divider solves a real problem: two adjacent background colours meeting in a hard line reads as two documents stapled together, and a curve sells them as one design. The implementation details that matter: set the wave's FILL to the colour of the section it transitions INTO (the wave belongs to the next section, visually); preserveAspectRatio=none โ already set โ lets one wave stretch to any width; and inline SVG costs no request and inherits no font baggage. Taste guardrails: one or two divider styles per page, amplitude under control on text-heavy pages, and check the mobile width where waves compress. Blobs are the free-floating cousins; gradients fill both.
Frequently asked questions
How do I add the wave between two sections?
Paste the SVG at the end of the first section and set its fill to the SECOND section's background colour โ the wave visually belongs to what's coming. Flip it for the reverse transition.
Why does the wave stretch weirdly on wide screens?
It doesn't โ preserveAspectRatio='none' (set by default here) makes it stretch smoothly to any width. Without that attribute an SVG keeps its aspect and leaves gaps.
What do the layers do?
Translucent copies of the wave offset behind the main one โ the depth effect. One layer is clean, two is the classic look, three is a seascape.
SVG or PNG for dividers?
SVG always: a wave is a few hundred bytes of path, scales losslessly, and recolours with one attribute. PNG waves blur on retina and lock their colour.