Gradient
Straight, round, or a slow aurora.
- Kind
- Layer · Backgrounds
- Script name
gradient- Cost to draw
- Heavy

Gradient
| Setting | Kind | Starts at | Range and notes |
|---|---|---|---|
Stylestyle | choice | Aurora | Straight, Round, Aurora |
First colourcolour1 | colour | #08090a | – |
Second colourcolour2 | colour | #123a24 | – |
Third colourcolour3 | colour | #0b2a3a | – |
Angleangle | number | 135° | 0 to 360° |
Flowflow | number | 0.4 | 0 to 2 |
Graingrain | number | 25% | 0% to 100% |
From a script
Every setting above can be changed by the scene's logic, by its key. Say the layer is called Gradient:
scene.set("Gradient", "colour1", "#ff8a5c");scene.animate("Gradient", "opacity", 0.5, 2);import { scene } from "motion";scene.set("Gradient", "colour1", "#ff8a5c");scene.animate("Gradient", "opacity", 0.5, 2);◆On Scene Start
ƒSet Layer SettingTarget is Layer
TargetGradient
Parameter Namecolour1
Parameter Value
Used in
The example scenes with a Gradient layer in them. Each picture is the whole scene, not the layer alone: open one to see what the layer does in it.
ConstellationsAdvanced12 layers
Ink PoolBeginner5 layers
Jelly BloomBeginner3 layers
Kelp ForestIntermediate7 layers
Lantern SeaBeginner4 layers
Long HorizonIntermediate12 layers
Rain on GlassIntermediate9 layers
SnowfallIntermediate14 layers
Solar WindBeginner5 layers
Storm FrontIntermediate11 layers
Two GalaxiesIntermediate10 layers
Vent GardenAdvanced13 layers
What every layer has
Besides its own settings, every layer has its opacity, blend, placement, quick effects and an effects stack. They're listed once, on the layers page.
Notes from the community
Written by creators and checked by the docs' editors. Not part of Motion's official reference.