How to use the SVG section divider generator
- Choose a Shape: Wave, Curve, Tilt, Triangle, Arrow, Zigzag, Steps or Layered waves.
- Set the Height in pixels (10–400).
- Set Colour (of the next section) to the background colour of the section below.
- Tick Flip horizontally to mirror it, or Flip vertically (top of a section) to hang it from the top.
- Copy the Usage code or download
divider.svg.
What it does and when to use it
Landing pages often stack coloured blocks: a dark hero, a light features area, a coloured call to action. A straight line between them works, but a gentle wave or angle makes the page feel less boxy and leads the eye down. This tool gives you the shape as inline SVG with no images to host.
The shapes here are fixed designs that scale to the width of the page. For a random, layered wave with more control over height and roughness, use the SVG wave generator. For decorative shapes inside a section, try the SVG blob generator. If the next section has a pattern rather than a flat colour, set the divider to the pattern’s background colour from the SVG pattern generator.
How it works
Every shape is drawn on a 1,200 × 120 canvas. The filled area always reaches the bottom edge, so it merges with the section below. The SVG tag uses width="100%", your height, and preserveAspectRatio="none", which stretches the shape to any width without changing the height.
Flips are done with one matrix transform: matrix(-1 0 0 1 1200 0) mirrors left to right, and matrix(1 0 0 -1 0 120) turns the shape upside down. Layered waves draws three wave paths in the same colour at 30%, 55% and 100% opacity.
The usage code wraps the SVG in a div with aria-hidden="true", because the shape is decoration that screen readers should skip. Everything is built in your browser.
Worked examples
Default wave. Wave, 100 px, colour #f1f5f9. The tag is width="100%" height="100" preserveAspectRatio="none", and the path is M0,60 C150,110 350,10 600,60 C850,110 1050,10 1200,60 V120 H0Z.
A dark tilt, mirrored. Tilt, 60 px, #0f172a, Flip horizontally ticked. The output is <g transform="matrix(-1 0 0 1 1200 0)"><path d="M0,120 L1200,0 V120Z" fill="#0f172a"/></g>, so the slope rises from right to left.
Layered waves at the top of a section. Layered waves with Flip vertically ticked wraps all three paths in matrix(1 0 0 -1 0 120).
Limits and tips
- There is one colour per divider. For a gradient, edit the SVG and add a
linearGradient. - Keep the height modest on mobile; a 100 px wave can look tall on a narrow screen. A CSS media query can set a smaller height for phones.
Frequently asked questions
Which colour should the divider be?
How do I put a divider at the top of a section instead?
Why is there sometimes a thin line between the divider and the section?
Does the shape keep its proportions on wide screens?
How do we know nothing is uploaded? Test it yourself on the privacy proof page.