---
title: "Shape Divider Pro — Free Framer component · Best of Framer"
description: "Free Framer component · by Anwaar Ansari · Effects. 18 SVG section transition shapes"
canonical: "https://framer.elliotli.dev/component/shape-divider-pro"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Shape Divider Pro

# Shape Divider Pro

18 SVG section transition shapes

[View on Framer](https://framer.com/marketplace/components/shape-divider-pro/?via=elliot-li)

![Shape Divider Pro preview image 1](https://framer.elliotli.dev/og/component/shape-divider-pro/8066a6fa4a553969/1600x1200.jpg)

## Summary

18 SVG section transition shapes

## Description

## 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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #2401

## Details

- **Author**: Anwaar Ansari
- **Published**: 2026-07-08
- **Updated**: 2026-07-08
- **Added**: 2026-07-08
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows