ZeroServer.tools

CSS Section Separator Generator

Generate SVG section-divider shapes — wave, zigzag, slant, and curve — as copyable markup for smooth section transitions.

Shape

Flip

Amplitude: 60px

Height: 120px

Fill color

SVG markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" width="100%" height="120">
  <path d="M0,90 C300,30 900,150 1200,90 L1200,120 L0,120 Z" fill="#6366f1"/>
</svg>

CSS wrapper

.separator {
  display: block;
  width: 100%;
  height: 120px;
  line-height: 0;
}
.separator svg {
  width: 100%;
  height: 100%;
}

How CSS section separators work

Section separators are decorative SVG shapes placed at the border between two page sections to create a smoother visual transition than a hard horizontal line. Because SVG is vector-based, the shape stays crisp at any width when the viewBox is paired with preserveAspectRatio="none" and the SVG is stretched to width: 100% in CSS.

Pick a shape — wave, zigzag, slant, or curve — tune the amplitude and height, then set the fill color to match whichever section the shape should blend into. Use the flip option to point the divider up or down, or mirror it left-to-right, so it reads correctly whether it sits at the top or bottom of a section. Copy the SVG markup directly into your HTML, or wrap it with the provided CSS so it always fills its container. For more shape and vector tools see SVG Wave Generator and SVG to Data URI.

Private & free — this tool runs entirely in your browser.