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.

Position

Flip horizontally

Height: 90px

Color

.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.