Skip to content
HTML/CSS to ImageDocs

Use Shape blocks for marks, backgrounds, accents, and decorative structure. Add one from the left sidebar and choose the shape when you add it.

Common properties

Most blocks share these controls in the right sidebar. Selecting a child also shows controls for its parent layout.

PropertyDetails
SizeWidth can be fixed, percentage-based, or automatic. Height can be fixed, flexible, or constrained by minimum and maximum values. Lock the aspect ratio to preserve proportions. Size values support variables.
ArrangeX and Y position blocks on the canvas or inside Free Panels, using fixed values or percentage anchors. Alignment controls place blocks at common positions. Rotate, flip, lock, or change the layer order.
BackgroundChoose a solid color, a linear, radial, or conic gradient, or a pattern. Colors support variables. Gradient stops have colors and positions and are sorted by position; linear and conic gradients also have an angle. Pattern colors and size support variables, with controls varying by pattern.
BorderSimple mode shares color, thickness, style, and radius across all sides. Advanced mode sets each side's color, thickness, and style and each corner's radius independently.
ShadowAdd layers of regular shadow, inner shadow, or glow, subject to the block-specific limits below.

Canvas and block backgrounds are separate: transparent areas reveal the parent or canvas. Patterns are based on CSS Pattern. See Sizing and positioning for sizing modes and position anchors.

Rectangles and circles support solid, gradient, and pattern backgrounds and advanced borders. Stars and triangles support solid colors and linear or radial gradients, simple borders, and drop shadows or glow; they do not support patterns, conic gradients, inner shadows, or shadow spread.

  • Rectangle
  • Circle
  • Triangle
  • Star

The type cannot change after creation. Add a new Shape block when you need a different type.

Property Details Variables
Opacity Transparency of the whole block, including content and styling. Yes

Templated content

Many properties can use variables to assign their value when each image is created. Variables can be required, ignored, or given a fallback value. Pass values in template_values when rendering the template.