How to Make an Animated Gradient Background for Video
Make an animated gradient background for video in the browser: pick a preset, tune colours and speed in the gradient editor, keyframe it, export MP4 or WebM.
By the end of this guide you will have a moving gradient background rendered as an MP4 or WebM file, ready to sit under titles, a product shot or a talking head. You need a KinoViz account and about ten minutes. Browsing, editing and previewing gradients works on every plan; exporting most of them requires Pro, and the free exceptions are listed below.
What you need
- A KinoViz project at the aspect ratio you intend to publish.
- An idea of the palette, or a willingness to press R for a random variation until something lands.
- Nothing else. Gradients are generated in the browser, so there is no footage to source or licence.
Step by step
1. Create a project at your final aspect ratio
Choose Landscape (1920 × 1080) for YouTube or a site hero, Portrait (1080 × 1920) for Reels and Stories, or Square for feed posts. A gradient fills the canvas when added and re-fills if you change the ratio later, but composing at the final ratio from the start saves a second pass.
2. Open the Background tab of the Asset Library
Click the Library icon in the left toolbar and open the Background tab. It contains 22 gradient types across three families — Fields, Strips and Objects — presented as 66 preset cards. Filter by family with the chips at the top, or search by name.
| Family | What it looks like |
|---|---|
| Fields | Continuous colour fields: Flow, Sky, Aurora, Mesh, Still, Retro, iOS |
| Strips | Bands and columns: Linear, Stripes, Bars, Columns, Prism, Waves, Lines |
| Objects | Repeating shapes: Glassy, Rings, Pixel, Blocks, Beehive, Balls, Radial, Conic |
3. Add a gradient to the canvas
Click a card. The gradient arrives filled to the canvas and drops to the bottom of the layer list, behind everything else. Every type and preset can be added, edited, previewed and animated on any plan including Free — the plan check happens at export.
4. Open the gradient editor
Double-click the gradient on the canvas, or click Edit Gradient… in the property panel. The full-screen editor shows every preset of every type, not just the three per type that reach the Asset Library. Presets that need a paid plan to export carry a PRO badge, so you know before you commit.
Press R, or click Surprise me, for a randomised variation whenever you need a starting point.
5. Tune the colours
In the Colours section, click a colour to open the drawer:
- Custom — a hue slider plus a saturation and brightness field, or type a hex value.
- Library — 21 named colours, filterable by colour group.
A gradient carries between two and six colours. Drag the grabbers on the band track to give each colour more or less of the frame, and on types that support colour spots, drag the rings on the preview to pin a colour where you want it.
6. Set the speed and the parameters
Speed controls the rate of motion, and 0 freezes the gradient into a still image — twelve of the types ship at Speed 0. Time Offset shifts the gradient's own clock so two gradients using the same preset do not move in lockstep. The parameter sliders change with the type: Scale, Fold and Drift on Aurora; Angle, Softness and Wave on Stripes; Tiles, Frost and Refract on Glassy. Soften, Noise and Contrast sit under Finish.
Click Save to apply everything to the canvas as a single undo step.
7. Keyframe the gradient
Switch to Animation Mode. Every one of those properties is keyframable — changing it at the playhead records a keyframe and interpolates like position or opacity. Three recipes worth stealing:
- Cross-fade the palette by keyframing the colour slots.
- Keyframe Speed from 0 to 40 so the background holds still and then starts drifting on a beat.
- Keyframe the colour spots so the colour blobs wander across the frame.
8. Layer your content and export
Build titles, a logo or product shots above the gradient, then export MP4 or WebM from the top bar. Gradients run on the project timeline rather than a private clock, so a re-export never comes back different.
Tips
- Slow is usually right. A background that moves quickly competes with the content in front of it.
- Check the free-to-export list before you fall in love. Radial and Conic export on any plan; most other types need Pro.
- Use Time Offset for variety. Two shots using the same preset look copied unless their clocks differ.
- Keep the gradient out of components. Inside a Component definition it renders as a placeholder in the cached bitmap.
FAQ
Which animated gradients can I export for free?
The whole Radial type and the whole Conic type export on any plan, plus two individual presets — Mesh · Wisteria haze and Linear · Wisteria blossom, unchanged. That is 8 of the 66 library cards; the other 58 need Pro or above. Editing a free preset's parameters turns it custom, which also needs Pro.
Will the background loop cleanly in a video?
Gradients run on the project timeline, not a private clock, so scrubbing the timeline scrubs the gradient and every export is deterministic. For a seamless loop, keyframe the parameters so the last frame matches the first, or set Speed to 0 for a completely still background.
Can I use an animated gradient inside a Component?
Keep gradients on the main canvas. Inside a Component definition a gradient renders as a placeholder in the component's cached bitmap, so it will not animate as expected.
What happens to the gradient if I change the canvas ratio?
It re-fills the new frame automatically, for example switching from 16:9 to 9:16. That stops the moment you resize it by hand with a side handle, which is deliberate. Click Fit to canvas in the property panel to opt back in.
Related
- Gradient Backgrounds — all 22 types, the editor, and the export gate in full
- Animated Gradient Backgrounds — the design thinking behind them
- How to Export a Transparent PNG
- Asset Library — where the Background tab lives
- Animation & Timeline — keyframing gradient properties
- Glossary
- Pricing — which plan exports which gradients