Shapes
Shapes are ready-made vector objects: drop one onto the canvas, then recolor, resize, and combine it with anything else on the page.
Quick overview
- Open the Shapes tab in the left panel (
Alt+5). - Click a shape to insert it at the center of the canvas.
- Drag to reposition, or use the corner handles to resize.
- Style fill, stroke, corner radius, shadow, and opacity in the properties panel.
- Select several shapes and group them to move and layer them as one, see Grouping and layers.
Detailed reference
Available shapes
The shapes grid holds more than 30 presets, from simple primitives to decorative and nature-inspired forms:
| Group | Shapes |
|---|---|
| Basic | Rectangle, circle, oval, triangle, diamond, line |
| Geometric | Star, hexagon, pentagon, octagon, cross, ring, arch, trapezoid, parallelogram |
| Decorative | Heart, ribbon, crown, shield, badge, frame, arrow |
| Nature and symbols | Lightning bolt, leaf, flame, droplet, sun, moon, cloud, wave, blob, spiral |
These groups are a reading aid only. In the panel every shape lives in one scrollable grid, not separate category tabs.
Basic vs. complex shapes
| Type | Examples | Corner radius |
|---|---|---|
| Basic primitives | Rectangle, circle, triangle, diamond, oval | Rectangle only |
| Complex paths | Star, heart, hexagon, and the rest of the decorative and nature set | Not adjustable |
Basic shapes are simple, fast primitives. Everything else is a fixed vector path, so it recolors and resizes like any object but does not expose a corner-radius control.
Styling a shape
Select a shape to edit it in the properties panel:
| Property | Range / options | Notes |
|---|---|---|
| Fill | None, solid, gradient, image | Same fill-type control used by text and other objects |
| Stroke color | Any color | Outline color |
| Stroke width | 0-20 px | 0 removes the outline |
| Border style | None, solid, dashed, dotted | Rebuilds the outline from the current stroke width |
| Corner radius | 0 px and up | Rectangles only |
| Shadow | None, drop | Drop shadow adds its own color and blur, 0-100 px, default 10 |
| Opacity | 0-100% | Applies to the whole object |
The border style buttons build the dash pattern from the current stroke width: dashed uses a long-gap dash, dotted uses a tight dot pattern. Picking None sets the stroke width to 0. The drop shadow is cast down and to the right at a fixed offset; only its color and blur are adjustable.
Combining shapes
- Group: select multiple shapes and group them to move, scale, and layer them together. See Grouping and layers.
- Reorder: bring forward, send backward, bring to front, or send to back to control stacking.
- Duplicate: copy a shape with its styling intact.
- Save for reuse: turn a shape or a styled group into a personal asset with My shapes.
When a group is selected, changing the stroke color, stroke width, or border style applies to every shape inside the group at once. Corner radius and shadow apply to the group as a single object, not to each child separately.
Step by step
Build a rounded badge shape
- Open the Shapes panel (
Alt+5) and click the rectangle. - In the properties panel, set the fill to a solid color, for example type
#1E88E5into the color field. - Raise corner radius until the corners round off into a pill or badge. A rectangle is the only preset that responds to this control.
- Optionally add a stroke color and a small stroke width (1-2 px) for an outlined badge.
- Place text on top and group the two, see Grouping and layers, so the badge and its label move together.
Give a shape a soft drop shadow
- Select the shape.
- In the properties panel, switch Shadow to drop.
- Set the shadow color (black reads as a natural shadow) and raise blur for a softer edge. Blur runs from 0 to 100 px and starts at 10.
- The shadow always falls down and to the right; there is no separate offset control, so nudge blur and color to tune how much the shape lifts off the page.
Turn a shape outline into a dashed border
- Select the shape and give it a stroke color and a stroke width of at least 1 px.
- In Border style, click dashed or dotted. The dash pattern is generated from the current stroke width, so a thicker stroke gives longer dashes.
- To drop the outline again, click None in Border style, which resets the stroke width to 0.
Style the whole family at once
Select a group and set the stroke color once. Every shape inside the group updates together, so an icon set or a badge cluster stays consistent in a single move.
Common tasks
- Round a rectangle's corners: select it, raise corner radius. Circles, triangles, stars, and groups ignore this control.
- Remove an outline: set stroke width to 0, or click None under Border style.
- Add an outline to a fill-only shape: pick dashed, dotted, or solid under Border style. If the shape had no stroke, this adds a 1 px black outline you can then recolor and thicken.
- Recolor every shape in a group: select the group, change the stroke color or fill; the change reaches each child.
- Duplicate and restyle: press
Ctrl+Dto copy a shape with its styling, then change only the fill or stroke on the copy to build a matching set. - Save a styled shape for reuse: right-click it and choose Save to My Shapes, see My shapes.
Troubleshooting
- The corner-radius control does nothing. Only rectangles carry a corner radius. On a circle, triangle, star, heart, or any grouped selection the field has no visible effect, because those are fixed vector paths without rounded-corner geometry.
- The stroke color swatch seems dead. If Border style is set to None, the stroke width is 0, so no outline is drawn no matter what color you pick. Choose solid, dashed, or dotted first, then set the color.
- Picking a dashed or dotted border added a black line I did not ask for. When a shape has no stroke yet, choosing any border style adds a 1 px outline in black so there is something to dash. Set your own stroke color and width afterward.
- Corner radius or shadow on a group did not reach the individual shapes. Corner radius and shadow apply to the group as one object. Ungroup first if you need to round or shadow each shape on its own, then regroup.
- The shadow always points the same way. The drop shadow offset is fixed (down and to the right). Adjust color and blur to change how it reads; there is no offset slider.
Keyboard shortcuts
| Shortcut | Action |
|---|---|
Alt+5 | Open the Shapes panel |
Ctrl+D | Duplicate the selected shape |
Delete | Remove the selected shape |
Tips
Style once, then duplicate
Set fill, stroke, and corner radius first, then duplicate. Copies keep the same styling, so a repeated motif stays consistent across a design.
Shapes can hold images
Position a shape over a photo as an overlay, or turn it into a frame with the selection tools so an image drops inside its outline. See Selection tools.
Related
- My shapes to save and reuse custom shapes
- Icons for a broader symbol library
- Pen tools to draw a custom shape from scratch
- Backgrounds, patterns, and gradients for gradient fills
- Properties panel for the full styling reference