Effects
The Effects card is a composite card grouping three visual effects: Shadow, Glow and Edge.
Shadow
A directional drop shadow that extends outward from the shape.
| Property | Description | Default |
|---|---|---|
| Vertical | Shadow direction on the vertical axis: None, Top, Bottom | None |
| Horizontal | Shadow direction on the horizontal axis: None, Left, Right | None |
| Same as shape color | Use the shape's primary color as the shadow color | On |
| Color | Shadow color (visible only when Same as shape color is off) | #000000 |
| Transparency | Shadow opacity (0–100%) | 50 |
| Size (px) | Shadow extent in pixels (1–50) | 5 |
The shadow is composed via SVG filters. The Vertical × Horizontal combination determines the offset direction:
| Vertical | Horizontal | Effect |
|---|---|---|
| Top | Left | Shadow extends up-left |
| Top | Right | Shadow extends up-right |
| Bottom | Left | Shadow extends down-left |
| Bottom | Right | Shadow extends down-right |
| Bottom | None | Pure vertical shadow downward |
| None | Right | Pure horizontal shadow rightward |
| None | None | No shadow |
Shadow extension is integrated into the unified bounding box calculation: the shape is automatically scaled down to leave room for the shadow on the appropriate side. The shadow never bleeds back through the shape and never overflows the viewport.
Turning on In/out button in the Button Mode card greys this group out. The shadow is then driven by the button position — outset while Off, inset while On — and uses its own fixed settings rather than the ones above.
Glow
A soft halo around the shape.
| Property | Description | Default |
|---|---|---|
| Same as shape color | Use the shape's primary color as the glow color | On |
| Color | Glow color (visible only when Same as shape color is off) | #FFFFFF |
| Size (px) | Glow radius in pixels (0–50) | 0 |
Set Size to 0 to disable the glow.
Edge
| Property | Description | Default |
|---|---|---|
| Soften (px) | Gaussian blur radius applied to the shape edge (0–20) | 0 |
Edge softening creates a feathered border effect — useful for blending the tile into a colored background.