Gradient Backgrounds

Overview

A Gradient Background is a single canvas element that fills your whole frame with a living, animated gradient — flowing colour fields, aurora curtains, rolling bands, glassy tiles, honeycombs, radial blooms, and more. Pick one from the library and it fills the canvas immediately; everything about it — colours, shape parameters, speed — is adjustable and can be animated on the timeline.

Gradient Backgrounds live in the Background tab of the Asset Library, and the AI Agent can generate one for you directly (see AI Agent below).

Adding a Gradient Background

1. Open the Asset Library and click the Background tab.
2. Filter by family with the chips at the top, or search by name — search matches both English and Chinese names.
3. Click any card to add the gradient to your canvas. It arrives filled to the canvas and placed at the bottom of the layer list, so it sits behind everything else you build.
4. Double-click the gradient on the canvas — or click Edit Gradient… in the Properties Panel — to open the full-screen Gradient Editor.

The library shows 66 cards: the first 3 presets of each of the 22 gradient types. Every type has more presets than that, and you can reach all of them inside the Gradient Editor.

Families & Types

The 22 gradient types are grouped into 3 families.

Fields

Continuous colour fields that fill the frame edge to edge.

Strips

Bands, columns, and lines running across the frame.

Objects

Repeating shapes and figures tiled across the frame.

Properties & Keyframes

Select a gradient and the Properties Panel gives you:

• Edit Gradient… — opens the full-screen Gradient Editor.
• Fit to canvas — re-fills the gradient to the current canvas.
• Speed — how fast the gradient moves. 0 freezes it completely.
• Time Offset — shifts the gradient's own clock, so two gradients using the same preset don't move in lockstep.
• Parameters — a set of sliders that changes with the type: Scale, Fold, and Drift on Aurora; Angle, Softness, and Wave on Stripes; Tiles, Frost, and Refract on Glassy; and so on.
• Colours — each colour slot opens the colour picker. A gradient carries between 2 and 6 colours.
• Finish — Soften blurs the result, Noise adds fine grain, and Contrast toggles a punchier colour response.

Every one of these is keyframable. In Animation Mode, changing any of them at the playhead records a keyframe, and the value interpolates between keyframes just like position or opacity. Common recipes:

• Keyframe the colour slots for a slow palette cross-fade.
• Keyframe Speed from 0 to 40 so the background sits still, then starts drifting on cue.
• Keyframe the colour spots (on the types that support them) so the colour blobs wander across the frame.

The Gradient Editor

Double-click a gradient to open the full-screen editor. It is the fastest way to explore the whole library, since it shows every preset of every type — not just the three that appear on the Asset Library cards.

• Presets — pick a family, then a type, then a preset from the grid. Pro presets carry a PRO badge so you know what needs a plan before you commit.
• Properties — the same parameter sliders as the Properties Panel, grouped by section, plus Finish (Soften / Noise) and Contrast.
• Colours — click a colour to open the colour drawer, then pick from Custom (hue plus saturation/brightness field, or type a hex value) or Library (21 named colours, filterable by colour group). Add or remove colours between 2 and 6.
• Colour balance — drag the grabbers on the band track to give each colour more or less of the gradient; tap a band to edit that colour.
• Colour spots — on the types that support them, drag the rings directly on the preview to pin each colour where you want it. Shuffle rearranges them, Reset returns them to the preset.
• Surprise me (R) — press R or click the button for a randomised variation whenever you want a starting point.
• Preview playback — play, pause, and scrub the preview to see how the gradient moves before you commit.

Save applies all of your changes to the canvas at once, as a single undo step. Back discards nothing silently — if you have unsaved changes it asks first, and you can save and leave, discard, or keep editing.

The editor follows the app's light/dark theme and is available in both English and Chinese.

Canvas Fit

A gradient is a background, so it tries to stay a background:

• When you add one, it fills the current canvas.
• When you change your canvas ratio — say from 16:9 to 9:16 — it re-fills automatically.
• The moment you resize it by hand with a side handle, it stops following. That's deliberate: a gradient you deliberately shrank into a panel shouldn't jump back to full-frame the next time you change the canvas.
• Click Fit to canvas in the Properties Panel to opt back in and re-fill the frame. It's a single undo step.

Animating

Gradients run on the project timeline, not on their own private clock. That has two useful consequences:

• Scrubbing the timeline scrubs the gradient. What you see at 2.5s in the editor is exactly what the gradient looks like at 2.5s.
• Exports and published pages are deterministic — the same frame renders the same way every time, so a re-export never comes back different.

Twelve types (Mesh, Still, iOS, Linear, Waves, Lines, Rings, Blocks, Beehive, Balls, Radial, Conic) ship with Speed at 0, which keeps them perfectly still. Raise Speed and they start to move: rings ripple outward, conic fans rotate, meshes drift. Setting Speed back to 0 returns the exact still image you started from.

Export & Publishing

Gradients render in MP4 and WebM exports and on published pages, animating exactly as they do in the editor.

Note that a gradient placed inside a Component renders as a placeholder in the component's cached bitmap — put gradients on the main canvas rather than inside a component definition.

Free vs Pro

You can browse, add, edit, preview, and animate all 22 types and every preset on every plan, including Free. Your plan is only checked when you export.

That's 8 of the 66 library cards free to export; the other 58 need Pro or above. If you export a project using a Pro gradient on a lower plan, the upgrade dialog names the gradient (for example, Pro gradient: Aurora) so you know exactly what triggered it.

Gradient Backgrounds are usable on all plans. Exporting a Pro gradient requires the Pro plan and above.

AI Agent

The AI Assistant is currently paused.

Describe the background you want and the AI Agent creates the gradient, fills the canvas, and drops it to the bottom layer for you. It can also restyle an existing gradient or animate it. Prompts that work well:

• "Add an animated aurora background in deep green and navy."
• "Make the background gradient match my brand palette — coral, cream, and dusty blue."
• "Keep the background still for the first two seconds, then let it start flowing."

Next Steps

• Asset Library — Browse 3D models, TextFX, icons, and your uploads
• Gallery Walls — Turn your photos into an animated wall
• Animation & Timeline — Keyframe gradient parameters over time
• AI Generation — Build and edit scenes from a prompt
• Billing & Plans — See which gradients each plan can export
• Pricing — Compare plans