Section dividers that fit your layout
Those shaped breaks between website sections — a wave, a slope, a torn paper edge — are a fast way to stop a page feeling like stacked rectangles. This tool exports them as clean SVG sized for full-width use.
Set the Amplitude and Skew of the curve, then add Layers to build a stacked, depth-y divider in two tones. Export and paste between your sections.
How to use it
- Shape the edge with Amplitude (how tall) and Skew (how lopsided).
- Add layers for a stacked two-tone divider with a sense of depth.
- Match the fill colors to the sections above and below it.
- Export the SVG and drop it at the boundary between two sections.
Where designers use it
- wave and slope breaks between page sections
- layered footer transitions
- landing-page rhythm and pacing
- email and newsletter section breaks
FAQ
How do I place this between two sections on my site?
Export the SVG, set its fill to the color of the section it sits against, and position it at the seam — usually full-width with a fixed height. The shaped edge bridges the two background colors.
Why are there multiple layers?
Each layer is a slightly offset curve in a second tone, which reads as depth. One layer is a clean single edge; three or four gives a richer, stacked transition.
Will it stretch to any screen width?
Yes — it's vector and set to scale across the full width, so it stays smooth on mobile and ultrawide alike.
Related tools
Keep going with nearby generators that pair well with this one.