# Background

A background reframes the recorded UI on a colored canvas with rounded corners, instead of edge-to-edge product chrome. Use it to give docs videos a calm frame, give launch clips brand-aligned framing, or make a busy app UI easier to focus on.

Backgrounds are configured under `options.video.background`. Setting any background switches the renderer into framed mode: the recorded content is centered, given rounded corners, and composited onto the canvas you pick. Cursor motion is remapped so it still tracks the workflow inside the framed region.

![Recorded UI framed on a brand background](https://placehold.co/1280x720/0B1220/ffffff?text=Framed+content+%E2%80%94+brand+canvas)

## Why background matters

The background changes the feel of the video before the viewer reads a single word.

- A quiet neutral canvas reads as documentation.
- A brand-aligned gradient reads as marketing.
- A high-contrast canvas helps dense, low-contrast app UIs stand out on small screens.

## Solid background

A single color filled across the whole canvas. Best for quiet docs videos and high-contrast hero clips.

![Solid background example](https://placehold.co/1280x720/0B1220/ffffff?text=Solid+%E2%80%94+%230B1220)

```json
{
  "video": {
    "background": { "type": "solid", "color": "#0B1220" }
  }
}
```

`color` must be `#RRGGBB`. No `direction` field: the canvas is filled with one color.

## Gradient background

Two-color interpolation across the canvas. Use it when you want a subtle brand feel without picking a strong solid.

![Gradient background example](https://placehold.co/1280x720/2f6df6/0b1220?text=Gradient+%E2%80%94+diagonal)

```json
{
  "video": {
    "background": {
      "type": "gradient",
      "from": "#0B1220",
      "to": "#101A33",
      "direction": "diagonal"
    }
  }
}
```

`direction` is one of `vertical`, `horizontal`, or `diagonal`. Defaults to `diagonal` when omitted.

## Controlling content size inside the background

When a background is set, the recorded content sits inside the resolved output canvas. By default the framed content is scaled to `0.95` of the output size. You can override that with `options.video.size.content`.

![Content scale inside a framed canvas](https://placehold.co/1280x720/0B1220/eeeae3?text=content.scale+%3D+0.9)

```json
{
  "video": {
    "size": {
      "width": 1920,
      "height": 1080,
      "content": { "scale": 0.9 }
    },
    "background": { "type": "solid", "color": "#0B1220" }
  }
}
```

`content.scale` accepts `0.5` through `1`. Use `content.padding` instead when you want pixel-exact inset. `content.padding` and `content.scale` cannot both be applied: `padding` wins when both are present.

See [Video and content size](/docs/customizing-video/video-and-content-size) for the full sizing model.

## When to skip the background

- Pure docs walkthroughs that prefer edge-to-edge UI.
- Recordings that go into existing branded chrome (a launch page already shows brand frames).
- Vertical mobile clips where every pixel of UI needs to be visible.

Omit `options.video.background` to get the unframed, edge-to-edge output.

## Agent prompt pattern

```text
Create a Slideshot video with a clean background that keeps the product UI
readable and avoids distracting from the workflow. Use a subtle diagonal
gradient that matches the brand palette when one is available.
```

## Related

- [Video and content size](/docs/customizing-video/video-and-content-size): pair the canvas with the right output dimensions and inner framing.
- [Intro templates](/docs/customizing-video/intro-templates): match the title-card background to the demo canvas.
- [Customize video](/docs/customizing-video): overview of every visual control.