> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getflowpilot.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Backgrounds

> Give a flow or a screen a layered background: stack solid colors, gradients, images, and animated motion presets.

A flow and each of its screens can have a **layered background**: an ordered stack of layers that are painted from bottom to top. Each layer is a solid color, a gradient, an image, or an animated motion preset. This is the rich background system. A plain component (a stack or button) has a single background color in its **Layer** section instead.

## Where backgrounds live

There are two places to set a background:

* **Flow default**: open the **Design** tab in the mini-sidebar, switch to **Flow Settings**, and edit **Default Background**. This background applies to every screen.
* **Per screen**: select a screen and open its **Background** section in the properties panel.

<Note>
  The layered background editor described here is an **Advanced mode** surface. In [Simple mode](/editor/editing-modes), the Design tab offers a curated **background preset** picker instead, grouped into **Gradients**, **Dark**, **Light**, **Vibrant**, and **Motion** (for example "Sunset Glow", "Dark Cosmic", "Northern Lights"), applied as the flow default.
</Note>

A screen has an **Inherit from flow** switch. While it is on, the screen uses the flow default and its layer controls are dimmed (you see "Inherited from flow defaults"). Turn it off to give the screen its own background. When you do, the screen seeds a copy of the flow's layers so you have a starting point, and you edit it independently from then on.

## The layer model

A background is an ordered list of **layers**. Each layer has:

* A **type**: Solid Color, Gradient, Image, or Motion.
* An **enable** toggle, so you can turn a layer off without deleting it.
* An **opacity** from 0 to 100.

Layers paint bottom to top, so the last layer in the list sits on top. Reorder them by dragging, or with the Move Up and Move Down controls. Add a layer with the **Add Layer** button, which offers Solid Color, Gradient, Image, and Motion. The **Templates** button applies a ready-made background preset you can then tweak.

### Solid

A single flat **color**.

### Gradient

A gradient with a **type** of linear, radial, or conic, and a list of **color stops** (each stop is a color at a position from 0 to 100). A linear gradient also has an **angle** (0 to 360 degrees). Radial and conic gradients have a **center** (X and Y, each 0 to 100 percent).

### Image

An image from a **source** URL, with:

* **Fit**: cover, contain, fill, or tile.
* **Position**: X and Y, where the image is anchored.
* **Blur**: an optional blur in pixels.

### Motion

An animated preset that moves on the device. There are three presets:

* **Gradient Flow**: a slowly shifting gradient.
* **Orb Blobs**: soft drifting orbs.
* **Aurora**: a flowing aurora effect.

A motion layer also has a **speed** multiplier (0.1 to 3.0, default 1.0).

## Example: a gradient with a subtle aurora

<Steps>
  <Step title="Open the screen's Background section">
    Select the screen. If **Inherit from flow** is on and you want this screen to differ, turn it off.
  </Step>

  <Step title="Add the base gradient">
    Click **Add Layer** and choose **Gradient**. Set it to **linear**, pick two color stops, and set the angle. This is your base, so keep it as the bottom layer.
  </Step>

  <Step title="Add a motion layer on top">
    Click **Add Layer** again and choose **Motion**. Select the **Aurora** preset. Because it is added last, it sits on top of the gradient.
  </Step>

  <Step title="Tone the motion down">
    Lower the Aurora layer's **opacity** to around 20 to 30 so it reads as a subtle shimmer over the gradient, not the main event. Adjust its **speed** if it moves too fast.
  </Step>

  <Step title="Preview on device motion">
    Use the canvas and [preview](/editor/preview-and-live-mirror) to check how the motion looks in context.
  </Step>
</Steps>

## Notes and warnings

* **Motion costs battery.** Motion backgrounds animate continuously on the device. Use them sparingly and keep the speed reasonable.
* **Remote images need to be reachable.** An image layer points at a URL. If the device is offline and the image is not bundled, it will not render. See [Offline and bundled flows](/ios-sdk/offline-bundled-flows) and [Media preloading](/ios-sdk/media-preloading).
* **Opacity and order matter.** Because layers paint bottom to top, a fully opaque layer hides everything beneath it.

## Common mistakes

* **Stacking opaque layers.** If a lower layer vanished, a layer above it is probably opaque. Lower the top layer's opacity or reorder the stack.
* **Expecting a remote image offline.** Bundle the image or preload it if the flow can run without a network.
* **Editing a screen background while inheriting.** If the layer controls are dimmed, turn off **Inherit from flow** first.

## Related pages

* [Colors and typography](/editor/colors-and-typography)
* [Animations](/editor/animations)
* [Particles](/editor/particles)
* [Media preloading](/ios-sdk/media-preloading)