# Export GIF, MP4 or WebM loops from any design [Canonical HTML page](https://gradiently.design/guide/export-video-gif) A still post with a background that slowly moves is the cheapest motion you will ever make: no footage, no editing, the same words. Here is how to export it as a loop, and which of the three formats to send where. ## The short version - With Pro, any Gradiently design can be exported as a seamless 5 to 30 second loop in which the words stay still and the Mark moves beneath them. - Four settings shape the loop: movement, pace, colour and particles, and the preview plays exactly as the file will. - Video saves as MP4 or WebM, depending on what your browser can record, at up to 1080p, and recording takes as long as the video. - GIF exports loop forever and are kept under 15 MB, stepping down in size on their own if needed. - A design with several pages can export as one video in which the pages play in turn with their transitions. To **export GIF** loops, or MP4 and WebM video, from a Gradiently design, open it in the Studio, choose **Export** and pick **Video** or **GIF**. Set a length between 5 and 30 seconds, choose how the Mark moves, and download. Your words stay perfectly still while the living background drifts, flows or breathes beneath them, and the loop joins without a visible jump, so it can repeat forever in a story, a post or on a screen. Video and GIF exports are part of Pro. ## GIF, MP4 or WebM: which to export | Format | Best for | Worth knowing | | --- | --- | --- | | **MP4** | Instagram, TikTok, LinkedIn, X, YouTube Shorts, most screens | The most widely accepted video format; small for its quality | | **WebM** | Websites and web apps | Plays in every modern browser; some social platforms don't accept it | | **GIF** | Email, chat apps, slides, places that won't take video | Loops forever with no play button; colours are limited, so files are larger and softer | When a platform accepts video, send video. A GIF is the fallback for places that only take images. Which video format you get depends on your browser: Gradiently records the loop in the browser and saves it as MP4 or WebM according to what that browser supports. If a browser can't record video at all, the dialog says so and suggests Chrome or Safari. The longer comparison lives in [GIF vs MP4](https://gradiently.design/guide/gif-vs-mp4) and [MP4 vs WebM](https://gradiently.design/guide/mp4-vs-webm). ## How to export a looping video 1. **Open Export and choose Video** The preview starts playing straight away, exactly as the finished file will. 2. **Set the length** Anything from 5 to 30 seconds. If the design has text entrances such as rise, pop, wipe or typewriter, the dialog shows the minimum length they need to finish. 3. **Choose movement, pace, colour and particles** Try a few combinations and watch the preview. Your choices are remembered on the design, so the next export starts where you left off. 4. **Record** The loop records in real time, so 20 seconds takes about 20 seconds. Keep the tab open until the download starts. 5. **Post it as a video** Upload the file wherever you would post a video. [Seamless loops](https://gradiently.design/guide/seamless-loop-video) explains why a clean join holds attention. ## Movement, pace, colour and particles | Setting | Options | What it does | | --- | --- | --- | | **Movement** | Drift, Flow, Breathe, Swirl, Still | Drift glides slowly; Flow runs a steady current; Breathe swells light with barely any movement; Swirl folds and turns the material; Still holds the field and moves only the particles | | **Pace** | Slow, Even, Brisk | How fast the movement runs | | **Colour** | Original, Glow, Shift, Cycle | Original keeps colours as designed; Glow breathes brightness in and out; Shift leans hues one way and back; Cycle takes hues all the way round | | **Particles** | The design's own, None, Dust, Stars, Mist, Swarm, Silk, Embers | An optional dust of light in the Mark's colours | Start calm. Drift at a Slow pace with Original colour suits almost any brand; add more only if the design asks for it. The calmer combinations make the best loops for feeds, because they read as a living surface rather than an animation demanding attention. Save the livelier ones, Swirl at a Brisk pace or Cycle colour, for launches, events and music, where energy is the point. And a Glow or Cycle loop on a story with a lot of small text is harder to read than a quiet one, so match the motion to the words. A portrait post reading Open late on Fridays over a slowly drifting gradient A calm loop for an everyday post: the field glides, the words never move. A vertical event story for a launch night with a swirling gradient and ember particles A livelier loop for an event story, with particles in the Mark's colours. ## How to export a GIF Choose **GIF** instead of Video and the same loop settings apply. The extra choice is **Quality**: Small, Balanced or Sharp. The dialog shows the GIF's size, frame rate and an estimate of the file size before you download, and the preview plays the loop exactly as the GIF will. ### Keep a GIF small - A shorter loop, 5 to 8 seconds - Small or Balanced quality - Calm movement with Original colour - No particles, or few - A smaller design size ### What makes a GIF heavy - A long loop - Sharp quality on a large design - Cycle colour, which changes every pixel - Dense particles such as Swarm - Fine grain across the whole field Every GIF is kept under 15 MB: if one would be larger, it steps down in size on its own. If it still can't fit, Gradiently asks you to try a shorter loop or a lower quality. GIFs are limited to 256 colours per frame, which is why a smooth gradient can show faint steps; [animated GIF tips](https://gradiently.design/guide/gif-maker-tips) explains how to keep them clean. ## Exporting several pages as one video A design with several pages, such as a carousel or a deck, can export as one video. The pages play one after another, each for its own length, with the transition you set between them: None, Fade, Slide, Zoom or Dissolve, where the words sink into the Mark and the next rise out of it. Set lengths and transitions in the page bar; [the carousel maker guide](https://gradiently.design/guide/carousel-pages) shows where. Choose **This page** in Export to get a single loop instead. ## How long a loop should be, and which size - Story and Reel 9:16: 1080 × 1920 - Portrait post 4:5: 1080 × 1350 - Square 1:1: 1080 × 1080 - Screen 16:9: 1920 × 1080 Design at the size of the place the loop will play. Video exports go up to 1080p, which covers all four. - **5 to 10 seconds** for stories, Reels covers and feed posts, where the loop repeats while someone reads. - **10 to 20 seconds** for posts with more to read, or a carousel exported as video. - **20 to 30 seconds** for screens in shops, receptions and events, where a longer cycle hides the repeat. - **Respect reduced motion** on websites: offer a still for visitors who ask for less movement, as [prefers reduced motion](https://gradiently.design/guide/reduced-motion) explains. The reasoning behind those lengths is in [how long a video loop should be](https://gradiently.design/guide/video-loop-length). For stills from the same design, PNG, JPEG, PDF and SVG, see [exporting designs](https://gradiently.design/guide/export-images-and-loops). ## FAQ ### How do I export a design as a GIF? Open the design in Gradiently, choose Export, then GIF. Pick a length of 5 to 30 seconds, the movement and a quality of Small, Balanced or Sharp, and download. ### Why did my video export as WebM instead of MP4? Gradiently records the loop in your browser and saves it in the format that browser supports. Some browsers record MP4, others WebM. ### How big can an exported GIF be? Gradiently keeps every GIF under 15 MB, stepping it down in size automatically if needed. ### Do the words move in a looping video export? No. The words stay still while the Mark moves beneath them, unless you have added text animations such as rise, pop, wipe or typewriter. ### Can I export a carousel as one video? Yes. Choose all pages in the video export and they play in turn, each for its own length, with the transitions set in the page bar.