---
title: "Page gap & background"
description: "Learn how to change the background color between pages and the spacing between pages in the Tiptap Pages extension."
canonical_url: "https://tiptap.dev/docs/pages/core-concepts/page-gap"
---

# Page gap & background

Learn how to change the background color between pages and the spacing between pages in the Tiptap Pages extension.

> **Looking for explicit page breaks?:**
>
> This page covers visual styling between pages (background color and gap). For inserting explicit page breaks into your document, see the [PageBreak node](https://tiptap.dev/docs/pages/core-concepts/page-break-node.md) documentation.

> **Renamed from pageBreakBackground:**
>
> The `pageBreakBackground` option and `setPageBreakBackground` command have been renamed to `pageGapBackground` and `setPageGapBackground` to avoid confusion with the new [PageBreak node](https://tiptap.dev/docs/pages/core-concepts/page-break-node.md). Update your code accordingly.

The `pageGapBackground` and `pageGap` options lets you change the background color of the area between pages and the spacing between pages. This can help visually separate pages or match your app's background color design.

> **Interactive demo:** [PagesCustomPageGap](https://embed-pro.tiptap.dev/preview/Extensions/PagesCustomPageGap)

## How to set the page gap background

The initial editor configuration for the page gap background can be done at the `.configure()` extension level:

```js
Pages.configure({
  pageGapBackground: '#f8f8f8', // Light gray between pages
})
```

Then, at any point, you could make use of the exposed editor command `setPageGapBackground(color: string)` to change the page gap color:

```js
editor.commands.setPageGapBackground(pageGapBackground)
// You should also do this!
document.body.style.backgroundColor = pageGapBackground
```

> **Helpful tip:**
>
> You should change the background color of the body (or your editor container) to match the page
> gap background as well because the page gap background is only applied to the page gap
> itself, not the entire document or the Tiptap editor.

## Page gap

- Sets the space between each page.
- Default: `50` (pixels)

### Initial configuration

```js
Pages.configure({
  pageGap: 20, // in pixels
})
```

### Editor command

```js
editor.commands.setPageGap(20) // in pixels
```

> **Hint:**
>
> The `pageGap` property only affects the space between pages, not the page itself.