Borders and Shadows

Add visual depth to your layers with borders and shadow effects.

Borders

Properties

Property	Description	Example
`border_width`	Thickness in pixels	`2`
`border_color`	Border color (hex)	`"#000000"`
`border_radius`	Corner rounding	`10` or `"50%"`
`border_style`	Line style	`"solid"`, `"dashed"`, `"dotted"`

API Example

{
  "layers": {
    "image-1": {
      "image_url": "https://example.com/photo.jpg",
      "border_width": 3,
      "border_color": "#FF0000",
      "border_radius": 15
    }
  }
}

Rounded Corners

border_radius: 0 — Square corners
border_radius: 10 — Slightly rounded
border_radius: "50%" — Circle (for square images)

Shadows

Shadows are configured in the Editor and applied via CSS.

In Editor

Select a layer
Go to Image Effects or Text Effects
Enable Shadow
Adjust:

Blur — Softness (0-50px)
Offset X/Y — Position
Color — Shadow color
Opacity — Transparency

Shadow Types

Drop Shadow — Classic shadow below element

blur: 10px, offset: 5px 5px, color: rgba(0,0,0,0.3)

Glow Effect — Shadow all around

blur: 20px, offset: 0 0, color: rgba(255,255,0,0.5)

Hard Shadow — No blur for retro look

blur: 0, offset: 4px 4px, color: #000000

Combining Effects

Layer multiple effects for depth:

Border for definition
Shadow for elevation
Border radius for softness

Updated on: 11/01/2026

Was this article helpful?

Thank you!