Dynamic Styling

Override fonts, colors, sizes, and other visual properties at render time without editing your template.

Dynamic styling lets you change the visual appearance of any parameterized element when generating an image — without modifying the underlying template. This is useful for brand customization, A/B testing, or generating themed variations.

How It Works#

Append a style property to any parameter name using dot notation:

parameterName.property

For example, to change the font size of a title element:

{
  "modifications": {
    "title": "Hello World",
    "title.fontSize": "48px"
  }
}

Text Styling#

Typography#

{
  "modifications": {
    "headline": "Breaking News",
    "headline.fontSize": "56px",
    "headline.fontWeight": "800",
    "headline.fontFamily": "Inter",
    "headline.fontStyle": "italic",
    "headline.lineHeight": "1.2",
    "headline.letterSpacing": "2px"
  }
}

Property	Values	Example
`fontSize`	Any CSS size	`"48px"`
`fontWeight`	`100` to `900`	`"700"`
`fontFamily`	Any Google Font or custom font	`"Roboto"`
`fontStyle`	`"normal"`, `"italic"`	`"italic"`
`lineHeight`	Multiplier or unit	`"1.4"`
`letterSpacing`	CSS spacing value	`"-1px"`

Google Fonts are loaded automatically. Just set the font family name and Orshot handles the rest.

Colors#

{
  "modifications": {
    "title": "Colorful Title",
    "title.color": "#e11d48",
    "title.backgroundColor": "rgba(0,0,0,0.8)",
    "title.backgroundRadius": "8px"
  }
}

Color values support HEX (#ff0000), RGBA (rgba(255,0,0,1)), and CSS color names (red).

Text Layout#

{
  "modifications": {
    "description": "Centered text with formatting",
    "description.textAlign": "center",
    "description.verticalAlign": "center",
    "description.textTransform": "uppercase",
    "description.textDecoration": "underline"
  }
}

Property	Values
`textAlign`	`"left"`, `"center"`, `"right"`
`verticalAlign`	`"flex-start"`, `"center"`, `"flex-end"`
`textTransform`	`"none"`, `"uppercase"`, `"lowercase"`, `"capitalize"`
`textDecoration`	`"none"`, `"underline"`, `"line-through"`

Text Effects#

{
  "modifications": {
    "heading": "Outlined Text",
    "heading.textStrokeWidth": "2px",
    "heading.textStrokeColor": "#ffffff"
  }
}

Image Styling#

Layout & Fit#

{
  "modifications": {
    "photo": "https://example.com/portrait.jpg",
    "photo.objectFit": "cover",
    "photo.objectPosition": "center top",
    "photo.borderRadius": "50%"
  }
}

Property	Values	Description
`objectFit`	`"contain"`, `"cover"`, `"fill"`	How the image fills its container
`objectPosition`	CSS position value	Focal point of the image
`borderRadius`	Pixels or percentage	Corner rounding

Borders & Shadows#

{
  "modifications": {
    "avatar": "https://example.com/user.jpg",
    "avatar.borderWidth": "3px",
    "avatar.borderColor": "#3b82f6",
    "avatar.boxShadowX": "0",
    "avatar.boxShadowY": "4",
    "avatar.boxShadowBlur": "12",
    "avatar.boxShadowColor": "rgba(0,0,0,0.15)"
  }
}

Shape Styling#

{
  "modifications": {
    "divider": "",
    "divider.fill": "#3b82f6",
    "divider.stroke": "#1e40af",
    "divider.strokeWidth": "2px",
    "divider.borderRadius": "4px"
  }
}

Position & Size#

Reposition or resize any element dynamically:

{
  "modifications": {
    "badge.x": "20",
    "badge.y": "20",
    "badge.width": "120",
    "badge.height": "40",
    "badge.opacity": "0.9"
  }
}

Property	Type	Description
`x`	number	Horizontal position in pixels
`y`	number	Vertical position in pixels
`width`	number	Element width in pixels
`height`	number	Element height in pixels
`opacity`	number	Transparency, `0` (invisible) to `1` (opaque)

Drop Shadows#

Add or modify drop shadows on any element:

{
  "modifications": {
    "card.dropShadowX": "0",
    "card.dropShadowY": "8",
    "card.dropShadowBlur": "24",
    "card.dropShadowColor": "rgba(0,0,0,0.12)"
  }
}

Multi-Page Styling#

Apply styles to specific pages using the page{N}@ prefix:

{
  "modifications": {
    "page1@title": "Dark Slide",
    "page1@title.color": "#ffffff",
    "page1@canvasBackgroundColor": "#0f172a",

    "page2@title": "Light Slide",
    "page2@title.color": "#0f172a",
    "page2@canvasBackgroundColor": "#ffffff"
  }
}

Example: Branded Variations#

Generate the same template with different brand themes:

const brands = [
  { name: "Acme Corp", color: "#e11d48", bg: "#fff1f2" },
  { name: "TechFlow", color: "#2563eb", bg: "#eff6ff" },
  { name: "GreenCo", color: "#16a34a", bg: "#f0fdf4" },
];

for (const brand of brands) {
  await fetch("https://api.orshot.com/v1/studio/render", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer <YOUR_API_KEY>",
    },
    body: JSON.stringify({
      templateId: "<TEMPLATE_ID>",
      modifications: {
        company_name: brand.name,
        "company_name.color": brand.color,
        canvasBackgroundColor: brand.bg,
      },
      response: { format: "png", type: "url" },
    }),
  });
}

Property names are case-insensitive. title.fontSize, title.fontsize, and title.FONTSIZE all work.

All Set? Let's Start Automating

Get Your API Key →

Image, PDF and Video Generation via API
Canva like editor with AI and smart features
No-Code Integrations (Zapier, Make, n8n etc.)
Embed Orshot Studio in your app
Start Free. No credit card required. Cancel anytime.