Tool

Section Divider

Give the seam between two sections a shape. Pick a divider, tune its amplitude, height and complexity, flip or invert it, and set the fill — all live between two stacked sections. Copy paste-ready SVG markup, a self-contained React component, or a CSS data-URI background.

Shape

Geometry

Amplitude55%Height100pxComplexity3

Color

Top section#0b0b0cFill / bottom#f5f5f5

Section one

Section two

<svg
  viewBox="0 0 1200 100"
  preserveAspectRatio="none"
  xmlns="http://www.w3.org/2000/svg"
  style="display:block;width:100%;height:100px"
>
  <path d="M0 100 L0 50 Q100 0.5 200 50 Q300 99.5 400 50 Q500 0.5 600 50 Q700 99.5 800 50 Q900 0.5 1000 50 Q1100 99.5 1200 50 L1200 100 Z" fill="#f5f5f5" />
</svg>