About the CSS Separator Generator
What is a section separator?
It's the shaped edge between two bands of a page, so the boundary is a slant, a curve or a wave rather than a straight line. Marketing pages have used them for years, because a flat horizontal join between two colored sections looks abrupt and a shaped one makes the page feel designed.
Drawing that shape by hand is the annoying part. You either export an image and keep its color in sync with the section, or you hand write SVG path data and guess at the control points.
This tool builds the shape and hands you a single CSS rule with the SVG already inlined in the background. There's no file to upload, no request to wait for, and the shape scales to any width because the SVG is set to stretch. Both section colors are part of the preview, which matters more than it sounds. A divider only looks right in the context of what sits above and below it, and most generators show you the shape on its own.
How to Use This Tool
- Pick a shape. Slant and curve are the safe choices. Wave and ripple have more character. Spikes and zigzag are loud and best kept short.
- Set the two colors. The one above must match the section above it exactly, or the join shows as a hairline.
- Adjust the height. Somewhere between 60 and 120 pixels suits most pages. Taller reads as dramatic and costs real screen space on a phone.
- Flip it if you need to. Left to right mirrors the shape, top to bottom swaps which section it belongs to.
- Copy the rule. One class, and the markup snippet shows where the div goes between your two sections.
Common Use Cases
Dividers do one job, which is to stop a page reading as a stack of rectangles. These are the places they earn it.
- Under a hero: a curve or slant between a colored hero and the white content below it, which is the most common use by a wide margin.
- Between alternating bands: a subtle slant every time the background color changes keeps a long landing page moving.
- Above the footer: a wave into a dark footer makes the end of the page feel deliberate.
- Around a testimonial band: the same shape at the top and the bottom, one of them flipped, brackets the section neatly.
- Torn paper effects: spikes or zigzag at a small height reads as a ripped edge rather than a design flourish.
Shaping other things? The CSS Clip-Path Generator cuts a shape out of any element, the CSS Triangle Generator handles the small arrows and pointers, and the SVG to CSS Background Converter inlines a drawing of your own the same way this tool does. Or browse all our free developer tools.
Frequently Asked Questions
Why inline the SVG instead of loading a file?
Because a divider is decoration, and decoration shouldn't cost a network request. Inlined in the background it arrives with the stylesheet, so it can't flash in late, and changing its color is an edit in your CSS rather than a new export. The cost is a few hundred bytes in the stylesheet, which gzip handles well since path data compresses hard.
Why is there a hairline between the divider and my section?
Almost always a color mismatch or a rounding gap. Check the color above the divider is exactly the section color, including alpha. If it matches and you still see a line, it's subpixel rounding at certain zoom levels, and the usual fix is to pull the divider up by a pixel with margin-top: -1px or to add a pixel to its height.
Will the shape distort on a wide screen?
It stretches, which is deliberate. The SVG carries preserveAspectRatio="none" and the background is sized to 100 percent by 100 percent, so the shape spans the full width at any size. For a slant or a curve that's what you want. If a shape needs to keep its proportions, set background-size to auto 100% and let it repeat instead.
Should I use clip-path for this instead?
For straight-edged shapes it's a fine alternative and slightly lighter, since clip-path: polygon() on the section itself needs no background image at all. It falls down on curves, which polygons can't describe, and on the fact that clipping a section removes its shadow and can clip sticky children. The background approach keeps the shape on its own element, which stays out of the way of everything else.
Do dividers hurt accessibility?
Not if they stay decorative. The generated markup is an empty div with no text and nothing focusable, so screen readers skip it. The thing to watch is content, since people sometimes tuck a heading inside the divider element and it ends up positioned strangely at other window sizes. Keep it empty and let it do one job.
How do I make it shorter on mobile?
One media query on the height. The shape is set to stretch, so changing the height alone rescales it without touching the SVG. Something like 60 pixels under a 640 pixel width keeps the effect without eating a third of a small screen.
Can I animate the shape?
Not the path itself, because it's baked into a background image. What you can animate cheaply is the whole element, so a slow horizontal drift with background-position on a repeating wave reads as movement. For a shape that genuinely morphs you want a real inline SVG in the markup and a path animation, which is a different job from this one.
