CSS Section Separator Generator
Generate SVG section-divider shapes — wave, zigzag, slant, and curve — as copyable markup for smooth section transitions.
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.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Producing a wave or slant divider between two page sections.
- Getting an SVG shape whose colour comes from a variable.
- Comparing divider shapes against a live preview.
- Producing a divider that scales with the container.
- Building a section transition without an image.
Frequently Asked Questions
- Should a divider be an hr element or a border?
- `<hr>` when it marks a genuine thematic break, because it carries that meaning to assistive technology. A border or pseudo-element when it is purely decorative — adding an `<hr>` for visual rhythm announces a section change that does not exist.
- How is a gradient or shaped divider built?
- Usually a pseudo-element with a background — a linear gradient fading at both ends, or an inline SVG for a wave or angle. Both keep the markup clean, and the SVG version is the one that scales without the shape distorting.
- Why does my hr not accept a colour?
- Because browsers style it as a bordered element rather than a filled one, so `background-color` does nothing until the default border is removed. `border: none; height: 1px; background: …` is the reliable reset.
- How thin can a divider be?
- A 1px border is a device pixel on a standard display and a third of one at 3× density, which is why hairlines look inconsistent across devices. `0.5px` works on high-density screens and rounds to 1 or to 0 elsewhere — a transform-scaled element is the robust approach.
- Should a decorative divider be hidden from screen readers?
- If it is a pseudo-element it already is, since generated content with no text is not announced. An `<hr>` used decoratively should carry `aria-hidden="true"`, or better, be replaced with a border — which removes the question entirely.
Common errors and gotchas
- Omitting a viewBox, which stops the shape scaling with its container.
- Leaving a decorative divider without `aria-hidden`, so a screen reader announces it.
- Using a colour that does not match the section below, which reads as a gap rather than a transition.
- Producing a very complex path where a simpler one would compress far smaller.
- Assuming the shape keeps its proportions at every width.