Open menu

SVG Shape Divider Generator

Make the edge between two page sections more interesting with a shape divider. Choose from 15 shapes, including waves, curves, tilts, triangles, arrows, book folds, zigzags, steps, scallops, mountains and clouds. Place it at the top or bottom of a section, flip or invert it, add translucent layers and stretch it. The tool exports a lightweight inline SVG with its CSS, a standalone SVG file or a React component.

Preset gallery
This section
Next section

Accessibility checks

  • Pass The SVG is marked aria-hidden and unfocusable, so screen readers skip this purely decorative shape.
  • Pass 100px tall: a comfortable transition between sections.

Export code

<!-- Place this at the bottom of the section. The fill is the next section's color. -->
<div class="divider">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0 60 Q300 0 600 60 T1200 60 L1200 120 L0 120 Z"/></svg>
</div>

<style>
.divider {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background-color: #EEF2FF;
}

.divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 100px;
}

.divider path {
  fill: #4F46E5;
}
</style>
Favourites on this device (0)

No favourites yet.

Shape
Position
Colors
Divider color (next section)
This section's background

How to use the shape divider generator

  1. Pick a shape from the gallery or the Shape menu.
  2. Choose the position. Bottom of section draws the shape into the next section; Top of section points it into the section from above.
  3. Adjust the look: flip it horizontally, invert the filled area, add one or two translucent layers behind it, and set the height and horizontal stretch.
  4. Set the colors. The divider color is the next section’s background; the section color is the one it belongs to.
  5. Copy the code. HTML + CSS is ready to paste. The SVG file works anywhere images do, and React gives you a component.

How it works

Every shape is a single SVG path in a 1200 × 120 box. The path follows the top edge of the shape and then closes along the bottom (or the top, when inverted). preserveAspectRatio="none" lets the shape stretch to any width while you control its height in CSS:

.divider svg { display: block; width: calc(100% + 1.3px); height: 100px; }
.divider path { fill: #4F46E5; }

Because the color is set in CSS, you can change it per theme or in dark mode without touching the SVG.

Worked examples

Example 1: a wave between hero and features

Load Wave, keep it at the bottom of the hero section, and set the divider color to the background of your features section. A height of 80–120px gives a gentle transition. Add one layer for depth without extra markup.

Load Mountains dark, set the position to Top of section inside your footer, and match the colors. The layered mountains frame the footer like a landscape. On phones, reduce the height to around 60px with a media query.

Example 3: a playful pricing section

Load Scallops or Zigzag at 30–40px. Small, repeating shapes work well between bright sections. Stretch the width to 150% for larger teeth.

Tips

  • Use one divider style throughout a page for a consistent rhythm.
  • Inverting a shape changes which section it seems to belong to. Try both.
  • Waves and curves feel friendly; angles and arrows feel energetic and directional.
  • The divider adds no layout shift: its height is fixed in CSS before the page renders.

Frequently asked questions

Which color should the divider be?

The divider sits inside one section and is filled with the background color of the neighbouring section. The preview shows both sections so you can match them: set the divider color to the next section's background and the section color to the one it sits in.

Why is the SVG width set to calc(100% + 1.3px)?

Browsers sometimes leave a hairline gap at the edge when an SVG is scaled to fractional pixel widths. The extra 1.3px hides that seam. The wrapper hides the overflow, so nothing spills out.

Are dividers accessible?

They are purely decorative, so the SVG gets aria-hidden="true" and focusable="false". Screen readers skip it and keyboard users never land on it.

How do I put a divider at the top of a section?

Choose Top of section. The wrapper is rotated 180 degrees, so the same shape points into the section from above. Use Flip horizontally to mirror it.

Will a tall divider cause problems on mobile?

Dividers keep their pixel height while the width shrinks, so a 300px divider looks much steeper on a phone. Keep heights moderate, or reduce them with a media query for small screens.

Sources