Backgrounds, patterns, and gradients

With nothing selected, the Background panel sets the backdrop of the current part. The same area builds decorative overlays and a multi-stop gradient you can apply to a background or to any object's fill.

Quick overview

1. Deselect everything, then open the Background tab (Alt+3), or the Background section of the properties panel.
2. Choose solid, gradient, or image for the page backdrop.
3. Open Patterns (Alt+7) to lay a geometric, text, icon, or image pattern over the canvas.
4. Open the Gradient card, or a fill swatch's gradient tab, to build a multi-stop gradient for a background or an object.
5. Adjust each feature's own color, opacity, and spacing controls until it reads right.

Detailed reference

Page background

Mode	Notes
Solid	A single flat color
Gradient	The same multi-stop gradient editor used for object fills, see below
Image	Upload or pick from your library, with a fit mode and, for cropped fits, a position anchor

Fit modes for an image background:

Mode	Behavior
Fill	Scales the image to cover the canvas, cropping any overflow
Fit	Scales the image to fit entirely inside the canvas, no cropping
Crop	Fills the canvas from a chosen anchor: top-left, top-center, top-right, center, bottom-left, bottom-center, or bottom-right
Tile	Repeats the image at its native size

Image backgrounds also carry brightness, contrast, and saturation sliders, a blur amount, a grayscale/sepia/invert preset, and a color overlay with its own opacity.

Geometric patterns

Twelve tiling patterns overlay the canvas as a decorative layer:

Patterns
Diagonal lines, grid, dots, diamonds, waves, stars, crosshatch, checkerboard, triangles, hexagons, circles, half fade

Control	Range	Default
Color	Any color	White
Opacity	5-100%	30%
Spacing	0.5x-5x	1x
Blur	0-20 px	0

A geometric pattern is added as a single locked overlay that fills the page behind your content. Clicking a different pattern card replaces the current overlay rather than stacking a second one, and the color, opacity, and spacing controls re-tile the live overlay as you drag them.

Tiling overlays

Beyond the 12 geometric patterns, the Patterns section can also tile text, icons, or images as a repeating overlay:

Type	What it tiles	Extra controls
Text pattern	A repeated word or phrase, any font	Rows, columns, gap, angle, letter spacing
Icon pattern	Up to 8 icons from the icon library, in single, dual, or mixed mode	Per-icon rotation, blur, and scale
Image pattern	Up to 8 uploaded or library images	Random rotation, blur, scale, and position jitter for a scattered look

All three share color (where relevant), opacity, row and column counts, gap, and rotation angle, and each inserts as one grouped object you can remove and reapply. Each type also has its own Remove button, and re-applying rebuilds the group from the current settings.

Grid layout

A separate Grid card builds a placeholder grid of cells, useful as a starting collage layout rather than a texture:

Control	Range	Default
Columns	1-12	3
Rows	1-12	2
Gap	0-40 px	4 px
Border radius	0-50 px	0
Cell opacity	0-100%	100%

Six quick presets cover common layouts from 2x1 up to 4x4.

Gradients

One multi-stop gradient editor is shared by page backgrounds and any object's fill:

Control	Options
Type	Linear, radial, angular, diamond
Stops	2 or more, each with its own position, color, and opacity; drag along the track, or add and remove stops
Flip	Reverses the stop order
Rotate	Turns the gradient 90 degrees at a time
Presets	A curated set of ready-made color pairs and trios
Eyedropper	Picks a color from anywhere on screen, where the browser supports it

Open the gradient editor from a fill swatch's gradient tab when an object is selected, or from the Background panel's Gradient card when nothing is selected. The Background panel's Gradient card is a thin control: it shows a live preview plus Apply and Remove buttons, and mirrors whatever gradient is loaded in the right panel color picker.

Step by step

A gradient poster background

1. Click an empty spot on the canvas to deselect everything, then open the Background tab (Alt+3).
2. Open the Gradient card. It shows a live preview alongside an Apply button and a Remove button.
3. Build the gradient in the right panel color picker's gradient tab: set the type (linear, radial, angular, or diamond), drag stops along the track, and give each stop its own color and opacity. Use Rotate to turn a linear gradient, or Flip to reverse the stop order.
4. Back in the Gradient card, click Apply. The gradient fills the page background and the card preview updates to match.
5. To revert, click Remove (the X beside Apply). The background falls back to the last solid color.

A subtle pattern behind text

1. With nothing selected, open Patterns (Alt+7).
2. Click a pattern card such as Dots or Grid. It tiles across the whole page as a locked overlay that sits behind your content.
3. Set Color close to the background color so the texture stays quiet.
4. Lower Opacity to roughly 10-20% so text and photos stay readable.
5. Use Spacing (0.5x to 5x) to tighten or loosen the tile. Clicking a different pattern card replaces the current overlay instead of stacking a second one.

A repeating text watermark

1. Open the Background tab (Alt+3) and find the Text pattern controls.
2. Type the word or phrase (the default is BRAND), then pick a font, size, and weight.
3. Set the rows and columns of the grid, a gap, and an angle (the default tilt is -45 degrees for a diagonal watermark).
4. Set the color and drop opacity low (the default is 20%).
5. Click Apply. The watermark inserts as one selectable group you can move or delete, and Remove clears it.

A scattered image tile

1. In the Background tab, open the Image pattern controls.
2. Add up to 8 images from the Gallery tab, or drag files onto the Upload tab.
3. Set the tile size, rows, columns, and gap.
4. Turn on Randomize to scatter the tiles: it adds a random rotation (plus or minus a chosen range), a random blur, a random scale down to 0.5x, and position jitter so the images do not line up on a rigid grid.
5. Click Apply to drop the pattern in as one group. Remove clears it.

Common tasks

Goal	How
Solid page color	Deselect, open Background, pick a solid color
Gradient fill on one object	Select the object, open its fill swatch's gradient tab, build the gradient there
Reuse a gradient as the page background	Build it in the color picker, then Background > Gradient card > Apply
Faint brand texture	Patterns, low opacity, a color near the background, wider spacing
Diagonal watermark	Text pattern with a tilt angle and low opacity
Photo collage starting grid	Grid card, set columns and rows, then drop images into the cells

Troubleshooting

Gradient looks banded

A wide two-stop gradient over a large area can show visible steps between the colors. Add an intermediate stop, or nudge the two end colors closer in hue, to smooth the transition.

A pattern makes a small design look busy

A tile that reads well at full size can turn to noise once the design is scaled down. Raise the Spacing so the motif is larger and sparser, drop the opacity, or pick a simpler pattern (dots or diagonal lines instead of stars or hexagons).

The pattern faded when I raised blur

The geometric pattern blur control softens the overlay by easing its opacity down as the value climbs, not by adding a true blur. If the pattern is disappearing, lower the blur and use the Opacity slider directly instead.

Apply the gradient after you edit it

The Gradient card reflects whatever gradient is currently loaded in the right panel color picker. If a change does not show on the page, click Apply again to push the latest stops to the background.

Keyboard shortcuts

Shortcut	Action
Alt+3	Open the Background panel
Alt+7	Open the Patterns panel

Tips

Keep pattern opacity low

Patterns sit above the background but behind your content. A low opacity and a color close to the background keep them from competing with text and photos.

Start a gradient from a preset

Pick a preset, then swap its stop colors for your own. It is faster than building a gradient stop by stop, and the direction and stop count are already sensible.

Related

• Shapes for solid and gradient fills on individual objects
• Icons for the icon set used by icon patterns
• Properties panel for object fill and the page Background section
• Pages since each page keeps its own background