Skip to main content
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.
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

1

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.
2

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.
3

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.
4

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.
5

Preview on device motion

Use the canvas and preview to check how the motion looks in context.

​
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 and 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.