BYTETOOLS

SVG Shape Divider Generator

Generate wave, tilt, curve, triangle, book, arrow and split section dividers as parametric SVG, ready as inline markup or a CSS data-URI background image.

Section above
Section below

Divider settings

Shape colour
Section above
120
60

Inline SVG

<div class="divider-wrap">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" width="100%" height="120" aria-hidden="true" focusable="false">
  <path d="M0,60 C150,24 348,96 600,60 C852,24 1050,96 1200,60 L1200,120 L0,120 Z" fill="#7c3aed"/>
</svg>
</div>

CSS background (data URI)

.section-divider {
  width: 100%;
  height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20120%22%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22120%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M0%2C60%20C150%2C24%20348%2C96%20600%2C60%20C852%2C24%201050%2C96%201200%2C60%20L1200%2C120%20L0%2C120%20Z%22%20fill%3D%22%237c3aed%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

Path data only

M0,60 C150,24 348,96 600,60 C852,24 1050,96 1200,60 L1200,120 L0,120 Z

What is the SVG Shape Divider Generator?

A shape divider is the curved or angled edge between two sections of a page, and it is one of the few decorative flourishes that costs almost nothing: a single SVG path, a few hundred bytes, scaling perfectly at any width.

  • Seven parametric shapes: waves, tilt, curve, triangle, book, arrow, split
  • Height and amplitude sliders with flip and invert
  • Two-section preview showing the real boundary
  • Inline SVG, CSS data URI, and raw path output
  • Data URI is percent-encoded so hex colours never truncate it
  • Stretches to any width without distorting the section edges

How to use the SVG Shape Divider Generator

  1. 1

    Choose a shape from the dropdown or the thumbnail row.

  2. 2

    Set the shape colour to match the section that sits below the divider.

  3. 3

    Adjust the height and amplitude sliders, and flip or invert if you need it mirrored.

  4. 4

    Check the two-section preview to confirm the boundary looks right.

  5. 5

    Copy the inline SVG, the CSS data-URI rule, or just the path data.

About the SVG Shape Divider Generator

A shape divider is the curved or angled edge between two sections of a page, and it is one of the few decorative flourishes that costs almost nothing: a single SVG path, a few hundred bytes, scaling perfectly at any width. This generator builds seven of them from parameters rather than from a fixed library of files.

Pick a shape, set the height and amplitude, and flip or invert it to point the other way. The preview stacks two coloured sections with the divider between them so you can see exactly how it will sit on a real page. Give the divider the same colour as the section below it and the shape carves the boundary.

You get three outputs: inline SVG, a CSS rule with the shape encoded as a data URI, and the raw path data on its own. Everything is generated in your browser and nothing is uploaded.

Frequently asked questions

What is an SVG shape divider?

It is a decorative SVG placed between two sections of a page so the edge between them is a wave, a slant or a curve instead of a straight line. The SVG is filled with the colour of one section, which makes it read as that section having a shaped edge.

Should I use inline SVG or a CSS background?

Inline SVG is easier to recolour with CSS variables and can be targeted by other rules. A data-URI background keeps your markup clean and is handy when the divider is purely decorative. Both are provided here; for a background, remember to set an explicit height.

Why does my SVG data URI break in CSS?

Nearly always an unescaped hash character. A hex colour like #7c3aed inside a data URI is read as a fragment identifier and truncates the value at that point. This tool percent-encodes the whole SVG so the hash becomes %23 and the URI survives.

How do I make the divider face the other way?

Use the invert toggle to mirror it vertically, which turns a shape that hangs down into one that rises up, and flip to mirror it left to right. Combining both rotates the shape by 180 degrees, which covers every orientation you are likely to need.

Do shape dividers affect accessibility?

They are purely decorative, so the generated SVG is hidden from assistive technology and kept out of the tab order. Screen readers skip it, which is the correct behaviour — just make sure no real content sits inside the divider area.

Related tools