--- updatedAt: 2026-08-23T21:17:11.000Z agentTools: projectIndex: https://docs.synthesia.io/llms.txt --- # Shape Add shapes to your videos for visual structure, emphasis, and design. Add shapes to your scene—they're incredibly versatile! Use them as containers for images and text, create eye-catching overlays, design interactive buttons, add arrows and labels, and much more. # Add a shape 1. Select the `Shape` button in the top toolbar. 2. Select a shape from the available options. 3. Drag and position the shape in your scene, then adjust its size, rotation, color, border, and shadow settings as desired.

**Available shapes:** | Column 1 | Column 2 | Column 3 | Column 4 | | ------------------ | ----------------- | ----------------- | -------------- | | line | single line arrow | double line arrow | solid square | | solid circle | empty square | empty circle | solid triangle | | star | process start | process middle | process end | | diamond | hexagon | parallelogram | trapezoid | | pie | block arc | chord | block arrow | | double block arrow | square with label | | | # Shape settings Select a shape and head to the inspector panel to adjust its settings. Double-clicking on a shape to add text also reveals [text style settings](https://docs.synthesia.io/docs/text#text-settings).

## Interactivity Toggle on [interactivity](https://docs.synthesia.io/docs/interactivity) to turn your shape into a button. Double-click on your shape to add button text. ## Layout

Use the layout settings to: * Lock the layer to prevent accidentally moving it. * Adjust the element's alignment and distribution to the canvas and to other elements. * Move it forward or backward in the layer order. * Manually adjust or set its X and Y coordinates on the canvas. * Manually adjust or set its height and width, with the option to constrain its proportions. * Manually adjust or set its angle/rotation. * Flip it over a vertical or horizontal axis. ## Text [Text settings](https://docs.synthesia.io/docs/text#text-settings) appear if you double-click on a shape and add text to it. ## Layer ### Opacity Adjust the transparency of the entire shape layer. Alternatively, adjust the opacity for either the fill color or the border, so you could have a semi-transparent fill color with a fully opaque border, or the inverse. Layer opacity affects the entire layer instead. ### Radius Adjust the border radius (corner roundness) for a shape. Adjusting each corner independently

For rectangular shapes (squares, rectangles, images, videos, and SVG icons), you can control each corner independently: 1. Select a rectangular shape. 2. In the `Radius` section, select the corner icon on the right to set the radius for each corner independently. 3. Adjust each corner separately: top-left, top-right, bottom-right, and bottom-left. This gives you precise control for custom designs, such as buttons with rounded top corners or speech bubble shapes. ### Note: Selecting the corner icon again links all corners back together so they have the same radius. ## Fill Change the shape fill color—it can be a solid color or a gradient. ### Note: Gradients are only available as a color option for fill and text color, not for borders or shadows. ### Color picker Change a color or apply a gradient using the color picker: * **Other colors in this video**: Select from colors already used in this video. * **Custom colors and gradients**: Select the rainbow square with the plus icon to create your own. * **Theme colors**: Use colors from your [Brand kit](https://docs.synthesia.io/docs/brand-kits) (Enterprise only). * **Base colors**: Choose from a default palette. * **Base gradients**: Select from pre-built gradient options. Color palette

When adding a new color, or after selecting an existing one, choose between HSL or Hex input and set the color's opacity:

After selecting a color, select `Change all` to replace every instance of that color throughout your entire video. ### Gradients Select the rainbow square with the plus icon, then toggle from `Color` to `Gradient` at the top of the color picker. Choose between a `Linear` or `Radial` gradient. Creating a gradient

Add up to 5 color stops: * Select the gradient bar to add a stop. * Double-click a stop, or drag it off the bar, to remove it. * Drag a stop along the bar to reposition it, or past another stop to reorder them. * Set a unique color and opacity for each stop. For a linear gradient, use the arrows to set its direction, or enter an angle directly in the text box. ### Note: A radial gradient is always a centered circle—you can't move its centerpoint or make it elliptical. ## Border Toggle the border option in the inspector panel on to add and define the shape's border color and thickness. Border settings

## Shadow Toggle the shadow option in the inspector panel on to add and define the shape's shadow style, color, and the opacity of the shadow. Shadow settings

There are three shadow style options: soft, regular (default), and retro.

# Sibling pages * [Avatar](https://docs.synthesia.io/docs/avatar.md) * [Text](https://docs.synthesia.io/docs/text.md) * [Motion](https://docs.synthesia.io/docs/motion-graphics.md) * [Media](https://docs.synthesia.io/docs/media.md) * [Captions](https://docs.synthesia.io/docs/captions.md) * [Interactivity](https://docs.synthesia.io/docs/interactivity.md) * [Record](https://docs.synthesia.io/docs/record.md) # What’s Next * [Video Creation](https://docs.synthesia.io/docs/video-creation.md) * [Video Edit page](https://docs.synthesia.io/docs/video-edit-page.md)