How do I change styles without editing?

Override fonts, colors, sizes and positions at render time using dot-notation parameters.

Published Mar 25, 2026

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:

JavaScript

parameterName.property

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

JSON

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

Text Styling#

Typography#

JSON

{
  "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#

JSON

{
  "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#

JSON

{
  "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#

JSON

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

Image Styling#

Layout & Fit#

JSON

{
  "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#

JSON

{
  "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#

JSON

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

Position & Size#

Reposition or resize any element dynamically:

JSON

{
  "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:

JSON

{
  "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:

JSON

{
  "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:

JavaScript

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.

←

How do I render a carousel?

How do I generate images with AI at render time?

→

Was this page helpful?

Ready to automate?

Start rendering images, PDFs and videos from your templates in under 2 minutes. Free plan, no credit card.

Get your API key

Image, PDF and video generation via API
Visual editor with AI and smart layouts
Zapier, Make, MCP and 50+ integrations
White-label embed for your own app
100 free credits a month, no credit card required