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.
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.
Anwaar Ansari
