Why use an inline SVG instead of a CSS-only shape for a section divider?

A wavy or curved edge needs a smooth Bézier path, which clip-path's polygon() can only approximate with straight-line segments. An inline with a renders a true curve, scales cleanly to any width with preserveAspectRatio="none", and its fill color is just a CSS property — no extra image request.

How do I flip the divider so it faces the other way?

Toggle Flip horizontally to mirror the shape with transform: scaleX(-1), and switch Position between top and bottom to rotate it 180° so the curve reads correctly whichever edge of the section it sits on.

Can I animate the divider?

Yes — because the shape is an SVG path, you can animate its fill on scroll, or wrap it in a container and animate background-position on a duplicated, tiled version of the path for a subtly moving edge, similar to a parallax wave effect.

Will the divider stay full-width on any screen size?

Yes — the SVG uses viewBox="0 0 1200 120" with preserveAspectRatio="none" and width: 100%, so it stretches to fill its container at any viewport width while the height stays fixed to the pixel value you set.

Does this tool upload or store my choices?

No — every shape, color, and setting is generated and rendered locally in your browser. Nothing is sent to a server.

CSS WAVE & SHAPE DIVIDER GENERATOR

Build a wave, curve, slant, zigzag, or arc divider between sections and copy the HTML and CSS.

In short

This generator makes a section divider — wave, curve, slant, zigzag, or arc — as an inline SVG path that stretches to the full width of the page. You get the HTML and CSS for the height, fill color, top or bottom position, and horizontal flip you choose, with no image file to host. It runs entirely in your browser.

Position

Flip horizontally

Height: 90px

Color

.divider {
  line-height: 0;
  transform: none;
}

.divider svg {
  display: block;
  width: 100%;
  height: 90px;
}

.divider path {
  fill: #ff6a35;
}

Example output (default settings)

HTML

<div class="section"></div>
<div class="divider">
  <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
    <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"></path>
  </svg>
</div>
<div class="section section-alt"></div>

CSS

.divider {
  line-height: 0;
  transform: none;
}

.divider svg {
  display: block;
  width: 100%;
  height: 90px;
}

.divider path {
  fill: #ff6a35;
}

How to build a section divider

1
Pick a divider shape: wave, curve, slant, zigzag, or arc.
2
Choose whether it sits at the top or bottom of the section, and flip it horizontally if needed.
3
Adjust the height and pick a fill color on the live preview.
4
Copy the HTML and CSS and drop them between your page sections.

Questions

Why use an inline SVG instead of a CSS-only shape for a section divider?: A wavy or curved edge needs a smooth Bézier path, which clip-path's polygon() can only approximate with straight-line segments. An inline <svg> with a <path> renders a true curve, scales cleanly to any width with preserveAspectRatio="none", and its fill color is just a CSS property — no extra image request.
How do I flip the divider so it faces the other way?: Toggle Flip horizontally to mirror the shape with transform: scaleX(-1), and switch Position between top and bottom to rotate it 180° so the curve reads correctly whichever edge of the section it sits on.
Can I animate the divider?: Yes — because the shape is an SVG path, you can animate its fill on scroll, or wrap it in a container and animate background-position on a duplicated, tiled version of the path for a subtly moving edge, similar to a parallax wave effect.
Will the divider stay full-width on any screen size?: Yes — the SVG uses viewBox="0 0 1200 120" with preserveAspectRatio="none" and width: 100%, so it stretches to fill its container at any viewport width while the height stays fixed to the pixel value you set.
Does this tool upload or store my choices?: No — every shape, color, and setting is generated and rendered locally in your browser. Nothing is sent to a server.

Related tools

All Color & CSS Tools →

Updated October 11, 2026