Shapes Options Overview

The Shapes panel allows you to add an unlimited number of SVG shapes to your Container.

To add your first shape, click the Add Shape button.

A default shape is automatically added.

To delete the shape, click the X icon.

To edit the shape, click the wrench icon.

Built-in shapes

You can choose a shape from one of the 4 categories: Waves, Angles, Curves and Triangles.


Choose the color of the shape using our Color picker.


Choose whether the shape appears at the top or bottom of the Container.

Location: bottom
Location: top


Choose the height of the shape. This will make the effect of the shape more pronounced. You can change the height of the shape for Desktop, Tablet and Mobile devices.

Height: 50px
Height: 100px


The width of the shape needs to be at least 100%. By making it wider, you will make the effect of the shape less drastic. The wider it goes, the more “flat” the shape will become. This can be changed on Desktop, Tablet, and Mobile devices.

shape width: 200%
shape width: 100%

flip horizontally

This option will flip the shape horizontally so it’s a perfect mirror of itself.



The z-index option controls the stacking order of the shapes. As you can add as many shapes as you want, this allows you to control which shapes display on top of each other. You can also tell certain shapes to stack on top of your inner container content by making it a higher value than the Inner z-index option in the Layout panel.