# RunwayML Animated Gradient Motion Prompt

> Runway Gen-3 prompt and workflow to animate static gradients for websites

A technique combining static gradient images with Runway Gen-3 Alpha Turbo to generate fluid, animated background videos. It lets designers quickly produce moving blurred backdrops for Figma prototypes and landing pages without manual After Effects animation.

## The prompt

Prompt: Random movement of gradient colors, blue and purple gradient illusion, Dynamic motion, dynamic blur, 30s speed, unsharp edges.

Workflow steps:

1. Download a high-res gradient image from Grainient.supply.

2. Open RunwayML (app.runwayml.com) and go to Generative Video / Gen-3 Alpha Turbo.

3. Upload the gradient image as the source frame.

4. Enter the prompt above and generate the video.

5. Download the MP4 file and insert it as a video fill into your Figma landing page frame.

## What it is for

- Animate static gradient graphics into fluid background video loops
- Create animated hero backgrounds for landing page designs and web prototypes
- Add video fills to Figma frames without complex motion design software

## Key points

- Uses static gradient images (such as from Grainient.supply) as source frames
- Employs image-to-video generation via Runway Gen-3 Alpha Turbo
- Motion prompt: 'Random movement of gradient colors, blue and purple gradient illusion, Dynamic motion, dynamic blur, 30s speed, unsharp edges'
- Direct export to MP4 for use as video backgrounds in Figma or web builds

## Pricing

Freemium. Runway offers limited free trial credits; paid plans start at $12/month

## Details

- Type: Prompt
- Category: [Design](https://xiry.app/topics/design.md)
- Topic: [Motion Design](https://xiry.app/topics/design/motion-design.md)
- Open source: no
- Platforms: Web
- For: UI/UX designers, web designers, and front-end developers
- Alternative to: After Effects, Spline, LottieFiles
- Tags: runwayml, gradients, figma, video generation, prompts, landing page

## Why it was saved

- [@basit.designs, 1 October 2024](https://www.instagram.com/reel/DAlRflDA960/): Creates smooth, looping background motion for Figma prototypes, landing pages, or website hero sections without manual motion design.

## Compare

- [Alternatives to Spline](https://xiry.app/alternatives/spline.md)
- [Alternatives to After Effects](https://xiry.app/alternatives/after-effects.md)
- [Alternatives to LottieFiles](https://xiry.app/alternatives/lottiefiles.md)

## Related

- [Hera](https://xiry.app/resources/hera): AI-powered web editor for generating editable motion graphics from text prompts. (Web app, Freemium)
- [Modyfi](https://xiry.app/resources/modyfi): Browser-based graphic design editor with procedural motion graphics and effects (Web app, Freemium)
- [Jitter](https://xiry.app/resources/jitter): Fast, browser-based motion design tool with Figma import and AI animation features (Web app, Freemium)
- [Lottielab](https://xiry.app/resources/lottielab): Browser-based motion design editor for creating and exporting Lottie animations (Web app, Freemium)
- [Raylight](https://xiry.app/resources/raylight): Browser-based motion graphics editor for creating 3D product launch videos. (Web app, Freemium)
- [Unicorn Studio](https://xiry.app/resources/unicorn-studio): Visual canvas for designing interactive WebGL shaders and motion graphics (Web app, Freemium)

Updated 3 October 2026. Page: https://xiry.app/resources/runwayml-animated-gradient-motion-prompt

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.