Shape

Create editable shapes, photo masks and gradients.

How to use

Choose shape, fill and outline.
For photos, set source, position and scale to place the subject.
Enable gradient, soft edge and shadow where needed.

Things to check

The outline follows the shape boundary; grayscale affects the photo.

Property reference

Select the module in the editor to change its settings. Technical identifiers below are kept unchanged for reference; some advanced fields are stored as structured data rather than separate controls.

Find a property

38 / 38

alt

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

animation

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

string

animationDelay

Controls movement speed, duration or delay. Units are shown in the editor control; test timing in presentation mode.

number

animationDuration

Controls movement speed, duration or delay. Units are shown in the editor control; test timing in presentation mode.

number

animationInfinite

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

borderRadius

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

clipPath

The clipping boundary applied to content. Invalid formats may not be applied.

string

color

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

embossDepth

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

embossEnabled

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

gradientAnimation

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

boolean

gradientAnimationSpeed

Controls movement speed, duration or delay. Units are shown in the editor control; test timing in presentation mode.

number

gradientAnimationType

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

string

gradientColor1

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

gradientColor2

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

gradientDirection

Sets the associated element alignment, placement or direction; preview it within the content area.

number

gradientEnabled

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

gradientPosition

Sets the associated element alignment, placement or direction; preview it within the content area.

string

gradientType

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'linear' | 'radial'

grayscale

Converts the photo to grayscale; enable only when intended.

boolean

imageObjectPosition

Sets the associated element alignment, placement or direction; preview it within the content area.

string

imagePositionX

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

imagePositionY

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

imageScale

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

imageSrc

An image, media or link source. Use the media picker or an accessible URL and verify it loads in the presentation.

string

opacity

Visibility ratio: 0 is fully transparent and 1 is fully opaque.

number

points

Shape vertices or path points. Their order determines the path.

Array<{ x: number; y: number } | [number, number]>

pointsBox

Reference width and height for point coordinates, used when scaling the shape.

{ width: number; height: number }

pointsUnit

Specifies local coordinates or percentages for points; match the unit to your data.

'local' | 'percent'

polygon

A custom polygon boundary; define vertices in a valid order.

string | Array<{ x: number; y: number } | [number, number]>

rotate

Rotation or angle setting. Check block bounds and overlaps after rotating.

number

shadowBlur

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

shadowColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

shadowEnabled

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

shapeType

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'square' | 'circle' | 'rectangle' | 'oval' | 'triangle' | 'right-triangle' | 'diamond' | 'pentagon' | 'hexagon' | 'polygon' | 'decagon' | 'star' | 'star-4' | 'star-6' | 'arrow-right' | 'arrow-left' | 'arrow-up' | 'arrow-down' | 'chevron-box' | 'chevron-right' | 'chevron-left' | 'heart' | 'cross' | 'trapezoid' | 'parallelogram-right' | 'slanted-left-panel' | 'slanted-right-panel' | 'drop' | 'shield' | 'speech-bubble' | 'leaf' | 'ribbon' | 'banner' | 'tab' | 'diagonal-left' | 'diagonal-right' | 'wave-top' | 'wave-bottom'

softEdge

Creates a soft transition around decorative shape edges.

boolean

strokeColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

strokeWidth

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number