Gradients

#Gradient layer

Add one from + Add Layer at the bottom of the Layers list and pick the Gradient tile. The new layer starts as a two-colour gradient from your design system's first colour to its second, running top to bottom (Angle 180), at 90% scale so you can see its edges against the background. A layer's type is fixed once added: to swap a gradient for a photo, delete it and add a Media layer.

The controls

The Gradient card opens with a toggle between Fill and Gradient.

• Fill gives one Colour: a flat block of colour that sits over the layers below at the opacity you set. Switching to Fill takes its colour from the gradient's From.
• Gradient gives From and To. Each has a colour well plus a row of swatches from your brand palette. Click a swatch for an on-brand colour, or open the well for any other.
• Angle turns the gradient from 0 to 360 degrees. The default 180 runs straight top to bottom. Click the label to reset it.
• Opacity runs from 0 to 100%, so a gradient can be a light tint over a photo rather than a solid block.

Gradients are linear, from one colour to the other. A swatch writes its colour into the layer, so later palette changes do not restyle a gradient you already made.

The Background can be a gradient too

The scene's Background has a Source of Media or Gradient. A gradient Background has the same controls as a Gradient layer: Fill or Gradient, From, To, Angle and Opacity, and + Add Component offers it Shape and Gradient FX too, so it can animate its colour exactly as a layer does. It paints the same pixels a full-frame Gradient layer with the same settings would, over black.

• From, To and Angle are shared by every scene on that aspect ratio, so one change recolours the whole ad in that format. The button beside the card's title copies them to the other aspect ratios.
• Fill, Opacity, Shape and Gradient FX are the same on every aspect ratio, and linked States share them with the Background.
• The Background stays pinned to the frame and has no keyframes, so its Shape holds still across scenes. For a shape that morphs, or a gradient you can move, Mask or turn in 3D, use a Gradient layer.

Components on a gradient

A Gradient layer takes Shape, Crop, Mask, 3D Transform, Gradient FX and Ease from + Add Component. Its keyframes are automatic: on linked scenes it moves its position, scale, rotation and shape between its poses, and Ease shapes that move. The From and To colours and the Angle stay the same across a scene. To animate the colour itself, add Gradient FX. For colour that travels across particles, the Gradient Morph on a particle Vector sweeps brand colours across them over the scene.

To show a gradient only inside a logo or a word, add Mask and pick a Vector layer as the source (see Mask with a vector). If a gradient has both Shape and a vector Mask, the vector mask wins.

Tips

• A gradient at 30 to 50% opacity over a busy photo gives copy a calmer base while the picture still reads through.
• Use Fill with a low opacity for a brand-coloured scrim, and a second gradient layer for the glow.
• Keep the gradient between two palette colours for brand work: the swatches under From and To are the palette.

#Shape

Shape cuts the gradient layer into an outline. Add it from + Add Component on a Gradient layer. It is not a list of fixed shapes to choose from: every slider mixes into one outline, so you get shapes between the named ones.

The sliders

• Round runs from square at 0 to circle at 100. On its own it is a rounded rectangle at every value in between.
• Cut mixes in a polygon. At 0 there is none; at 100 the outline is fully the polygon.
• Sides sets the polygon's sides, from 3 to 8. It moves smoothly between counts, so 5.5 is a shape partway from a pentagon to a hexagon, which is what makes a morph between them smooth.
• Star pulls the polygon's sides inward into points.
• Warp adds organic noise to the outline, for a hand-cut or liquid edge. The first time you use it, it rolls a pattern and keeps it, so the edge does not change every time you open the project.
• Smooth rounds off the result.
• Soft Edge feathers the boundary so the shape fades out rather than stopping at a hard line. It is the gradient's softening: gradients have no Blur.

Shapes that move

Shape values are part of the layer's pose, like its position and scale. A layer holds one pose on each scene, so to animate a shape, link the scene with + Add Link and give the gradient a different shape on the linked scene. As the ad plays, the outline morphs from one to the other: a square that rounds into a circle, a hexagon that sharpens into a star. Ease shapes the pace of the morph. If you lock the layer's pose across the linked scenes, its shape is shared by all of them instead, so it holds still. The same code draws the preview and the export, so what plays in the editor is what renders. The sliders lock while the scene plays.

Worked example

A 1:1 promo where a brand-coloured disc turns into a star as the discount lands.

1. Add a Gradient layer, pick the brand's primary for From and its secondary for To, and set Angle to 135.
2. Add Shape. Set Round to 100 for a circle and Soft Edge to 10.
3. Press + Add Link under the scenes. The new scene is the next pose of the same composition.
4. On the linked scene, select the gradient and set Round to 0, Cut to 100, Sides to 5 and Star to 60.
5. Play from the first scene. The disc sharpens into a five-pointed star across the cut, ready for the "30% off" headline to land on it.

#Gradient on image

When a gradient layer carries a still image in its media slot, the Gradient on image panel combines the two. The panel appears only for a still image, not for a video, and a GL badge shows while it is applying.

Apply as

• Gradient map (tint) is the default and the classic duotone: the image's dark tones take the From colour and its light tones take the To colour. Any photo becomes a two-colour brand image.
• Multiply darkens the image with the gradient, like coloured ink on paper.
• Overlay and Soft light tint the image while keeping its contrast, Soft light more gently.
• Screen lightens the image with the gradient, like coloured light.
• Alpha mask fades the image out along the gradient's direction, so a photo can dissolve into the background at one edge.
• Off (gradient only) shows the plain gradient.

Strength runs from 0 (the untouched image) to 100 (the full effect). The From, To and Angle from the Gradient card drive every mode. The result is worked out the same way every time, so the preview, the video and the HTML export match.

Tips

• Pick From and To far apart in brightness for a gradient map: a dark palette colour for From and a light one for To. Two mid tones flatten the image.
• A Strength of 60 to 80 keeps some of the photo's own colour for a subtler brand wash.

#Gradient FX

Gradient FX animates a gradient's colour: the stops drift, the hue cycles and the angle turns as the scene plays. Add it from + Add Component on a Gradient layer or a gradient Background, then tick Animate gradient or press Randomize gradient.

The controls

• Randomize rolls a new seed, which is a new look. The same seed always gives the same gradient, in the preview and the export.
• Animate gradient turns the motion on and off. Off, the static gradient from the card above shows.
• The type: Linear and Conic run the brand colours as stops, Mesh floats soft colour blobs, and Aurora is a WebGL light field.
• The colour circles are the gradient's colours: click one to pick a colour from the page, right-click to put the brand colour back.
• Speed is how many times the motion plays in the scene (0 holds still), and Offset is where in the cycle the scene starts. Linear, Conic and Mesh add Hue cycle, Angle, Drift and Crossfade; Aurora adds Flow X, Flow Y, Warp, Scale and Shimmer. Reverse plays it backwards.

With Perfect loop on, the motion snaps to whole cycles so the end meets the start. On linked scenes and States the field carries on across the cut instead of starting again.