Make a video with a transparent background

If you've ever dipped your toes in making videos with alpha channels for transparency, you know it can get hairy.

Good news: With Rotato, it's as simple as any other video. Let's do it. Here's what we'll cover today:

But first, make sure you check out our complete guide to transparency in videos, including how to use them on the web (which is a little tricky, but unlike what some people think, not at all impossible)

How to make the background transparent

1. Click the checkered background color in the Looks sidebar
2. Click the Render Movie button and choose a destination
3. Click Render

That's it. You just made transparency happen!

Exporting your movie as a video file

When you've set a transparent background, Rotato will automatically choose a video format that supports transparency.

• HEVC With Alpha (default). Use this format if you are distributing. your video in a slide or with other Mac users. You can use this format in Safari. For Chrome, you'll need to convert it to WebM with an app like Rotato Converter. Also known as MPEG H265. This is a .mov file.
• Apple ProRes4444. This is a lossless format, which means the file is very big. It's great if you're rendering your Rotato video for use in another video editing app like After Effects or Final Cut. This is also a .mov file.

Click "More" in the Movie dialog to change the video format

Exporting your movie as a PNG sequence

If you want the flexibility of each and every frame rendered as a PNG image with a transparent background, choose PNG Sequence in the render dialog.

Using transparent videos in Figma prototypes

You can import your transparent video (HEVC with alpha) by dragging it into Figma. As of December 2023, it appears Figma has some issues showing transparency when you play your prototype. The Rotato team has confirmed this issue, but we've also seen it work a few times, so give it a shot.

You can follow along in this forum post.

Double-checking your work: Is it transparent?

It always makes sense to be sure. But, if you open the video in Quicktime or most other players, the transparency will look like a black background - even if it has an alpha channel.

Using the Transparency Tester tool

The simplest way to check is to drag your video into Rotato's free online Transparency Tester. It works on Mac and Windows and does not involve uploading your videos.

Using iMovie, Final Cut, Adobe Premiere, Safari, or Chrome

You can also check out our guide for more ways to test your video alpha channels.

Choosing a codec

You may have noticed that there were a couple of options when you were getting ready to render your movie. Let's take a look at what they mean.

• HEVC with alpha is when you don't need to edit your video after rendering
• ProRes is when you need to edit your, e.g., in Final Cut Pro

What about GIFs?

As you may know, GIFs are going away, at least. They're big, and the quality is bad. But sometimes, a GIF is all you can use. We get that. So, is there a way you can make GIFs with transparency with Rotato?

Sure. Here's how:

1. Export your video as described above
2. Get your hands on the free GIF maker Gifski
3. Open your video in Gifski and create your GIF.

Using transparent videos on the web

Despite what many think, transparent videos do work on the web, and in all browsers. Take a look at our guide on publishing transparent videos on the web or go straight to Rotato Converter to get your Chrome-friendly WebM file.