SVG Shape Divider Generator
Set container height and amplitude separately, preview 320, 768 and 1440px layouts, then copy SVG or complete section HTML and CSS.
🔒 Processed in your browser · no upload
Height is the SVG box height. Amplitude is the contour height as a percentage of that box. At the bottom, match the next section; at the top, match the previous section. The example includes its own CSS.
Responsive example
Choose a shape, set container height and amplitude independently, then copy SVG or complete HTML and CSS. All code is generated locally.
Put the divider into a real page
Container height controls the vertical space occupied by the SVG. Amplitude controls the contour within that box: 0% is flat and 100% uses its full height. A change in page width stretches the shape horizontally.
The complete HTML and CSS example reserves space for section content. At the bottom, the SVG sits in the first section and matches the next section's background. At the top, that relationship is reversed. Replace the two example text blocks with your own content.
Example CSS is scoped to sc-shape-demo. Each copied root retains its own height and color. If your site overrides SVG heights, section positioning or margins, inspect the final computed styles on your actual page.
How to use svg shape divider generator
- 1Choose tilt, curve, arc, triangle or steps.
- 2Set container height in pixels and amplitude as a percentage; choose top or bottom placement and horizontal mirror.
- 3Choose the fill color: match the next section at the bottom, or the previous section at the top.
- 4Check three example widths, then copy SVG or the complete HTML and CSS.
Why use Shape Cat's SVG Shape Divider Generator?
- The exported box height matches the height control; amplitude is independent.
- The complete example includes adjacent sections, positioning, content spacing and responsive CSS.
- Code is generated locally in your browser, with no upload or account.
Frequently asked questions
Does 84px export an 84px SVG?
Yes. Both the SVG height attribute and its default CSS height are 84px. Amplitude changes the contour without changing that box height.
What is the difference between SVG and HTML plus CSS?
SVG contains the shape only. HTML and CSS also include adjacent sections, positioning and content spacing for a working page example.
Why do the example section colors swap at the top?
A top-attached shape connects to the preceding section, so its fill matches that section. A bottom-attached shape connects to the next section.
What if copying is unavailable?
The full code remains visible. A failed copy selects it below so you can press Ctrl+C or Command+C.
Related CSS changes
Browser support notes near this tool
View the CSS Baseline 2026 change logUpdated · shape cat team