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

Source: https://screenity.io/help/web-editor/add-shapes

Shapes are overlays you can use for highlights, callouts, backgrounds behind text, progress bars and decoration.

## Add a shape

1. Select a scene, then choose **Shape** in the top bar of the editor.
2. Scroll the gallery, or use the list on the left to jump to a section.
3. 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](https://screenity.io/help/web-editor/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](https://screenity.io/help/web-editor/add-text-and-overlays#select-and-arrange-overlays).