SVG / Sections

SVG Shape Divider: Section Edges and Layers

Generate eight SVG section-divider shapes with amplitude, frequency, height, flips, inverted fill and up to three layers. Preview the section and copy SVG, CSS and HTML.

SVG Shape Divider: Section Edges and Layers: Pick a wave, curve, tilt, triangle, arrow, zigzag, cloud or mountain edge, adjust its height, amplitude and repeats, flip or invert it, and stack up to three layers. The divider stretches to any page width; copy the SVG, the positioning CSS or a ready-made HTML section. Runs 100% locally in your browser with zero server file uploads.

Category
Developer tools
Runs
In your browser
Cost
Free · no sign-up
Availability
Ready to use
SVG shape dividerLocal processing

Runs entirely in your browser

Section preview

A change of scenery.

A shaped edge between two sections.

Section divider
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg>
CSS positioning
.section { position: relative; overflow: hidden; padding-bottom: 160px; }
.section-divider { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; pointer-events: none; }
.section-divider svg { display: block; width: 100%; height: 100%; }
HTML section
<section class="section">
  <div class="section-divider" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg></div>
</section>

Use the next section's background colour for a continuous edge. Flip vertically when moving a bottom divider to the top.

Closed paths and coordinates

SVG 2 defines closepath and cubic path commands: https://www.w3.org/TR/SVG2/paths.html . The viewBox maps these coordinates to the viewport: https://www.w3.org/TR/SVG2/coords.html

Where the shapes come from

The wave shape uses the same smooth curves as the SVG Wave Generator and SVG Blob Generator; the other profiles are drawn from simple formulas. No third-party artwork is included, so the output is yours to use.

How to use it

  1. Choose a shape and adjust its amplitude, frequency and height.
  2. Set layers, opacity and colour, then select the section edge and any flips.
  3. Copy the SVG, positioning CSS and section HTML, or download the SVG.

Privacy & limitations

Shape generation and downloads run entirely in your browser.

Related tools

SVG waveSVG blobCSS pattern

Frequently asked questions

How do I make the edge blend into another section?

Use that section's background colour as the divider fill. The CSS reserves room for the divider and positions it absolutely at the chosen edge.

How is this different from the wave tool?

This tool adds seven other shapes, inversion and section HTML. The existing SVG Wave Generator offers random waves and additional wave-specific controls. SVG Blob Generator creates independent organic shapes.

What does invert do?

Invert closes the path towards the top rather than the bottom. It keeps the dividing edge in place. Flip vertically reflects the whole shape instead.

Free tool · runs in your browser · no account required