Export transparent WebM

Use transparent WebM when moving artwork needs to sit over a web page or footage. Exporting ordinary WebM or MP4 gives you a filled background. Choose the transparent format explicitly.

Export the transparent file

1. Open an example below in Mosso. Turn off the canvas background and remove any full-canvas rectangle that covers the artwork.

2. Click Export. Under Where it goes, choose Web video, see-through. You can also choose Transparent WebM under File type.

3. Check the output size and frame rate. Start small and use one repeat while you test.

4. Export the .webm file. If the browser cannot make it, try a current desktop Chrome or Edge, or export PNG frames.

Put it over a web page

Upload the WebM file to your site. This example starts muted playback only when the visitor has not asked for reduced motion:

<video id="overlay" muted loop playsinline preload="metadata"
  poster="/images/animation-still.png" aria-label="Decorative animation"
  style="width:100%;max-width:400px;height:auto">
  <source src="/uploads/animation.webm" type="video/webm">
  <img src="/images/animation-still.png" alt="Animation still">
</video>
<script>
  (() => {
    const video = document.getElementById('overlay');
    if (!matchMedia('(prefers-reduced-motion: reduce)').matches) {
      video.play().catch(() => {});
    }
  })();
</script>

Replace the file addresses with your own. Export PNG frames and choose one frame for the poster. If a browser cannot play WebM, the poster provides a still. Give each video a different id if you use more than one.

Check transparency where it will play

Put the file over a coloured background and check the actual browser or video editor that will show it. WebM playback support does not guarantee that a player preserves its alpha channel. Some players show a black or filled background.

If the background stays filled everywhere, check for a background layer in your project and export again. If it fails only in one player, use PNG frames for a video editor, or Lottie JSON for a website that can run a player.

Keep a still image for visitors who prefer reduced motion. MP4 is an option for a filled background, but it will not preserve transparency.

Free downloads and editable examples

The editor and every export format are free, with no card and no Mosso watermark. Library downloads need a free account. You can download up to 50 library animations a day, with the limit resetting at midnight UTC. Each download contains one animation.

Open an example below to try its look. Use its download buttons to get Lottie JSON or dotLottie through your account, or choose Edit this in Mosso to change the layers and export another format. A preview file is for playback, not an account download link.

Create a free account or sign in to download from the library. Read the library licence before sharing the finished work.

See the full export guide