Give the edge between two page sections a wave, curve, slant, arrow or mountain shape. Pick a shape, set its height, width, color and direction, preview it on a mock section and copy responsive HTML and CSS built from a tiny inline SVG.
Last updated:
Your sectionThe divider sits at the edge of this section and takes the color of the neighbouring one.
Next section
Position
Place the HTML inside the section that gets the divider and give that section position: relative.
Advertisement
Advertisement
How to use the CSS Shape Divider Generator
Choose a shape in the gallery.
Pick top or bottom and set the divider color to the color of the neighbouring section. The section color only changes the preview.
Tune height and width, flip or invert the shape, and optionally set a separate mobile height.
Copy the HTML into the section that gets the divider and give that section position: relative.
Copy the CSS into your stylesheet, or use the CSS background only tab if you cannot add HTML.
How the divider code works
The generator outputs three small pieces that work together:
A wrapper (.shape-divider-bottom or -top) that is absolutely positioned at the edge of the section, spans 100% of its width and hides overflow. line-height: 0 removes the gap an inline SVG would otherwise leave.
An inline SVG with a 1200 × 120 viewBox. Each shape is one closed path: the drawn outline runs from the left edge to the right edge and is closed along the bottom, so the filled part touches the section edge.
CSS that sets the SVG's height (and optional width above 100%), flips it with rotateY(180deg) when needed, and colors it through .shape-fill { fill: … }.
Because the shape is vector data stretched with preserveAspectRatio="none", it is crisp on every screen and the same code works from phones to ultra-wide monitors.
Choosing a divider shape
Shape
Feel
Typical height
Wave, layered waves, ripple
Friendly, organic, playful
60–150px
Curve, asymmetric curve
Soft and modern, good under hero images
50–120px
Tilt
Dynamic, sporty, startup landing pages
40–120px
Triangle, arrow
Points the eye to the next section or a call to action
30–100px
Zigzag, pyramids
Bold, retro or festive
20–60px
Mountains, clouds
Travel, outdoors, kids and weather themes
80–180px
Book
Editorial, magazine or education sites
40–100px
Tips
Add bottom padding to the section at least as large as the divider height so text never runs under the shape.
Set a smaller mobile height: a 150px wave on a 360px-wide phone looks much steeper than on a desktop.
Stretching the width to 150–200% flattens waves and curves into a calmer, more subtle edge.
To make the divider look like part of the next section, use exactly the same hex color for the divider and that section's background.
Frequently asked questions
What is a shape divider?
A decorative edge between two website sections, such as a wave or a slant, instead of a straight horizontal line. It is usually an SVG positioned at the top or bottom of a section and filled with the color of the section next to it, so the two sections appear to flow into each other.
Why does the SVG use preserveAspectRatio="none"?
It lets the shape stretch to the full width of the section while keeping the height you set in CSS. Without it, the SVG would keep its 10:1 proportions and either leave gaps or grow very tall on wide screens.
Why is the width calc(100% + 1.3px)?
Browsers sometimes round sub-pixel widths and leave a hairline gap at the right edge of a stretched SVG. Adding about one pixel hides that gap. The parent has overflow: hidden, so nothing spills out.
How do I put the divider at the top of a section?
Choose Top. The CSS then anchors the wrapper at top: 0 and rotates it 180 degrees so the shape points into the section. Use the color of the section above as the divider color.
Can I use a divider without editing the HTML?
Yes. The CSS background only tab encodes the SVG into a data URI for background-image, positioned at the top or bottom of the section. It is handy in page builders that only allow custom CSS. Note that a background sits behind the content, so leave padding for it.
Will shape dividers slow down my site?
No. Each divider is a few hundred bytes of inline SVG, needs no extra request and is hidden from screen readers with aria-hidden, so it does not affect accessibility either.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.