Shape divider
The divider fills downward — it is the top edge of the section below. Flip Y turns it into a bottom edge.
Stop cutting sections with a straight line
A shape divider is the shaped edge between two page sections — a wave, a diagonal, a curve or a zigzag where a flat horizontal border would otherwise be. It is one of the cheapest ways to make a landing page look designed rather than assembled, because the eye reads the transition as intentional. This svg shape divider generator gives you nine families, each with depth, flip, invert and layered parallax controls, and exports the result as CSS, as an SVG file, or as a PNG.
How to build one
- Pick a shape family — wave, tilt, curve, arc, triangle, arrow, split, book or zigzag.
- Set the depth: shallow reads as a subtle detail, deep becomes a design feature in its own right.
- Use Flip X, Flip Y and Invert to aim the edge — Flip Y turns a top edge into a bottom one.
- Add a second or third layer for the parallax look, and pick a solid or gradient fill.
- Copy CSS for a one-class background, or download the SVG when you want it inline.
Getting the colour right
This is the part people get wrong. A divider is not a decoration floating between two sections — it is part of one of them. The shapes here fill downward, so by default the divider belongs to the section below and must be filled in that section's background colour; then the section above shows through the empty part of the shape and the two interlock. If the fill does not match, you get a visible third band and the effect falls apart. Flip Y when you would rather the shape belong to the section above.
SVG file or CSS background?
Both exports describe the same shape. The CSS route embeds the SVG as a data URI in a
background-image, so a single class on the section gives you the divider with no extra
markup — the tidiest option when the divider is purely decorative. The standalone SVG is better when you
want to inline the markup and style the path from CSS later, or hand the file to someone else. Every
shape is authored in a 1440 by 320 viewBox and exported with preserveAspectRatio="none", so
it stretches to any width while holding its depth.
Waves specifically
Wave is the most-used divider by a distance, and it is the first family here. If waves are all you need — especially layered organic ones with independent amplitude and point counts — the dedicated SVG wave generator goes deeper on exactly that shape. This tool is the broader one: the same wave, plus the eight other edges a section divider might want, with the flip and invert controls that turn nine families into seventy-two distinct edges.
Frequently asked questions
What is a shape divider?
It is the shaped edge between two sections of a page — a wave, a diagonal tilt, a curve or a zigzag instead of a flat horizontal line. Technically it is an SVG shape the width of the section, sitting at the top or bottom edge, filled in the colour of the section it belongs to so the two blend into one another.
How do I add one to my site?
Two ways, and this tool exports both. Download SVG gives you a standalone file you can drop in as an <img> or paste inline, which is the most flexible option. Copy CSS gives you a background-image rule using a data URI, so a single class on the section applies the whole divider with no extra markup.
Should the divider be at the top or the bottom?
The shapes here fill downward, so by default the divider is the top edge of the section below it — give it that section colour. Flip Y turns the same shape into a bottom edge for the section above. Which you choose usually comes down to which of the two sections owns the colour you want the shape to be.
Do the dividers stay responsive?
Yes. Each shape is authored in a 1440 by 320 viewBox and exported with preserveAspectRatio set to none, so it stretches to any width while keeping its depth — which is what you want for a section edge. On very narrow screens a deep divider can eat a lot of vertical space, so drop the depth for mobile if you are using a fixed height.
What do the flip and invert controls do?
Flip X mirrors the shape left to right, Flip Y turns a top edge into a bottom edge, and Invert swaps which side of the curve is solid. Combined with the nine shape families they give you seventy-two distinct edges from one tool, which is usually enough to find a top and bottom pair that look deliberately matched rather than repeated.
Why would I stack layers?
Stacked layers produce the parallax look you see on a lot of marketing sites — two or three copies of the same edge at decreasing depth and opacity, offset slightly. It reads as depth rather than as a single flat cut. One layer is the cleanest and the smallest file; three is the most decorative.
Is this the same as your wave generator?
They overlap deliberately. The wave generator makes layered organic waves and is the better tool if a wave is what you want. This one covers section edges more broadly — tilts, curves, arcs, triangles, arrows, splits, book folds and zigzags as well as waves — with the flip and invert controls a divider needs.
Layered organic waves? The SVG wave generator → Comparing tools? Our getwaves.io alternative →