# Dynamic Styling

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

- **URL**: https://orshot.com/docs/image-generation/dynamic-styling

---

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

### 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@` 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" },
    }),
  });
}
```