Skip to content
All designer tools

SVG Section Divider Generator

Waves, tilts and notches for the seam between two bands — with the baseline gap and the antialiased hairline already dealt with

Section above
Section below
svgSVG
<svg
  class="divider"
  viewBox="0 0 1440 120"
  preserveAspectRatio="none"
  xmlns="http://www.w3.org/2000/svg"
  aria-hidden="true"
  focusable="false"
>
  <g>
    <path d="M0,87 q240,-66 480,0 q240,66 480,0 q240,-66 480,0 L1440,121 L0,121 Z" fill="currentColor"/>
  </g>
</svg>
cssCSS
.divider {
  display: block;      /* an inline svg leaves a baseline gap under it */
  width: 100%;
  height: 120px;
  /* The shape is painted in the *lower* section's colour, so it reads as
     that section pushing up into the one above. */
  color: var(--section-below, #ffffff);
}

/* Put it between the two bands, with no margin on either side. */
.section-above { background: #0f172a; }
.section-below { background: #ffffff; }
htmlPlacement
<section class="section-above"> … </section>
<svg
  class="divider"
  viewBox="0 0 1440 120"
  preserveAspectRatio="none"
  xmlns="http://www.w3.org/2000/svg"
  aria-hidden="true"
  focusable="false"
>
  <g>
    <path d="M0,87 q240,-66 480,0 q240,66 480,0 q240,-66 480,0 L1440,121 L0,121 Z" fill="currentColor"/>
  </g>
</svg>
<section class="section-below"> … </section>

Now use it on something

Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.

Hand these tokens to an agent

npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json

Height120px

How much vertical room the divider occupies. This is real page height — a 200px wave costs 200px of scroll, which is a lot to spend on a transition.

Depth55%

How far the shape reaches into the band, as a share of the height. Low is a suggestion of a curve; high is a statement.

Humps3

How many times the wave rises and falls across the full width. Odd numbers land the shape asymmetrically at the two edges, which usually reads as more deliberate than a perfectly symmetric one.

Layers1

Stacks the same shape again at lower amplitude, higher frequency and reduced opacity. Two layers reads as depth; three is the most that still reads as one divider.

Mirrors left to right. The fastest way to make the same shape not look repeated when you use it twice on one page.

Turns the shape upside down, so the band above pushes into the one below instead of the other way round. Swap the two colours below to match.

The shape inherits `color` from its container rather than carrying a hex. One copied snippet then works in both themes and in every section, which a literal cannot do.

Preview only
Preview only — and what currentColor resolves to

The shape is filled with the colour of the section below it, sitting on the colour of the section above. That is what makes it read as one band pushing into the other rather than as a third thing between them.

Keep this divider. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.

Create a free accountSign in

More designer tools

All 36 run in the tab — no account, no upload.See all