Add shapes, gradients and patterns
Add shapes from the web editor's shape gallery, adjust their settings live, and fill them with a color, gradient or pattern.
Shapes are overlays you can use for highlights, callouts, backgrounds behind text, progress bars and decoration.
Add a shape
- Select a scene, then choose Shape in the top bar of the editor.
- Scroll the gallery, or use the list on the left to jump to a section.
- Select a shape to add it to the scene. Hover over a shape to see its name.
Select the shape in the preview to move and resize it. Shapes can be animated and timed like other overlays. See Add text and overlays.
Adjust a shape
With the shape selected, the properties panel shows its settings, and the preview updates as you drag a slider. Every shape has Opacity, and you can turn Stroke on to add an outline and set its color and width. The rest depends on the shape. A speech bubble has tail settings, a star has its number of points, a ring has progress, and rounded shapes have corners.
Fill with a color, gradient or pattern
Under Fill, switch Type between Color and Pattern.
- Color opens the color picker. Choose a solid color or a gradient.
- Pattern fills the shape with a repeating pattern. Choose a pattern from the dropdown, then set its Foreground and Background colors, Size and Rotation. A few patterns add sliders of their own, such as Thickness.
A Progress bar has a separate Track fill for the part behind the bar.
To put text inside a shape, add the text and then use Bring to front and Send to back to arrange them. See Add text and overlays.
Last updated October 29, 2026