Shape Divider Pro

18 SVG section transition shapes

Full Description

Shape Divider lets you add a decorative SVG shape to the edge of any section - wave, curve, zigzag, triangle, and more to create smooth or dramatic transitions between sections instead of a hard rectangular edge.

Shape 18 shapes covering both organic and geometric styles: Wave, Wave (steep), Curve, Curve (asymmetrical), Tilt, Triangle, Triangle (asymmetrical), Arrow, Split, Zigzag, Zigzag (fine), Clouds, Mountains, Book, Arc, Bell, Rounded Step, and Stairs.

Soft shapes (Wave, Curve, Clouds, Bell, Book) suit editorial, wellness, and travel-style sites; geometric shapes (Tilt, Triangle, Zigzag, Stairs, Rounded Step) suit tech, architecture, and agency sites.

Fill

• Color — a flat fill, usually matching the background of the section behind the divider so it appears to cut into the edge of that section. Works with any hex, RGBA, or project color variable.

Size & placement

• Height — from 10px to 400px, independent of the section's own height.

• Position — Top or Bottom. Flips the shape to face the correct direction. Place this component as a layer at the top or bottom of your section's layer stack — it sits in normal document flow and renders identically on canvas, Preview, and the published site.

• Flip — mirror the shape horizontally for variety when using the same shape at both edges of a section.

Depth & finish

• Opacity — reduce and stack a second instance with a different height/shape for a layered, parallax-style depth effect.

• Shadow — None, Subtle, or Strong drop shadow along the shape's edge for a "lifted" look.