Shapes & Decorations

Intermediate 8 min read By Chitmunk Team Updated

Overview

Borders, frames, banners, the small plate behind a stat: most of what holds a card together is a shape. Chitmunk's shape element gives you 21 types, all vector, so they stay crisp at any card size or export resolution.

Every shape supports a full set of styling options:

To add a shape, click Shape in the Add panel (or the Shape button in the tool strip, or press R) to open the visual palette. Click any shape tile to add it to your canvas. You can also change the type from the shape picker in the inspector's Shape section, which has a filter box (try "star").

Shape Types

The shape picker offers these 21 types:

Switch between types at any time using the shape picker in the inspector. Styling properties carry over when you switch types.

Fill & Stroke

Every shape has independent fill and stroke controls in the properties panel.

Fill:

Stroke:

Tip: Set fill opacity to 0 for an outline-only shape. Pair with a colored stroke to create a clean decorative border that lets the card art show through underneath.

Corner Radius

Corner radius applies to Rectangle shapes only. In the Corners section, Radius rounds all four corners by the same amount. For more control, check Per-corner to set each corner independently:

Per-corner control is great for speech bubbles (one sharp corner pointing toward a character), info boxes with a distinctive notched corner, and card borders where only the top two corners are rounded.

Polygon & Star Sides

One shape type lets you configure how many sides it has:

The Sides field appears in the inspector when the Polygon type is selected. Changing the count updates the shape live on the canvas. Stars have no point-count control.

Gradients

Shapes support three gradient types, all applied via the Gradient dropdown under Fill & stroke advanced:

Each gradient type uses two color stops. Click each swatch to change the start and end colors. Gradients replace the solid fill color when active.

Tip: Use a radial gradient on a circle to create a gem or orb effect. A linear gradient on a rectangle at a shallow angle gives a metallic sheen that works well on buttons and cost badges. Conic gradients make convincing color-wheel or radar-sweep decorations.

SVG Pattern Fills

Instead of a solid color or gradient, you can fill a shape with a pattern or texture. Open Fill & stroke advanced in the inspector and click Textures... next to Pattern to open the browser, which includes Chitmunk's 32 built-in SVG tiling patterns (geometric, organic, classic, and playful) plus photo-style textures. Create... makes your own procedural texture.

Once a texture is applied, Fill mode chooses how it sits in the shape (repeat as tiles, stretch to fit, fill the box, or show the whole picture) and Scale sizes the tiles. To go back to a solid fill, click the × next to the applied texture.

Shadows

Drop shadows give shapes visual depth, making them read as floating above the card surface. Check Drop Shadow in the Shadow section, then set:

Shadows are especially effective on shapes used as card borders or info panels, where the slight lift helps them stand apart from background art.

Common Uses

A few patterns that come up frequently in card design:

Tip: Combine shapes with blend modes for advanced layering effects. Setting a shape's blend mode to Multiply or Overlay lets the card art show through while the shape still contributes color and tone. Find blend mode controls near the top of the properties panel, next to Opacity.

Shapes vs. Generators

Shapes are static geometric paths: great for borders, decorations, and simple graphics. For complex, multi-part game components (grids, tracks, spinners, stat displays), use Generators instead. Generators produce rich parametric visuals from configurable settings.

You can also convert any generator into a group of shapes via right-click → "Convert to Shapes" for manual editing.

Tips

Ready to try it?

Open the editor, free to try for 7 days.

Start Designing