5 Quick and Free Ways to Test Alpha Channels (Transparency) in videos

You've made a video with transparency—or so you think! Because how do you test it? Usually, to preview your moving picture masterwork, you'd double-click it to open it in QuickTime. But when you do that with a transparent video, you see a black background.

Yikes. Is it not working now?

Or maybe you tried dragging it into your browser, only to be reunited with the pitch-black background. A famous trick has been to hit space on a video to see it in QuickLook. Well, that trick is now dead, starting from Monterey. It may be back one day, but we don’t have time to wait.

So. What's going on? Does the video have transparency or not? Let's find out. Here's what we'll cover:

What you'll need

You need a video that you suspect (hope!) has an invisible background. That could be a video exported from Adobe After Effects, Final Cut, or maybe Rotato (here's how to export mockup devices with transparency in Rotato).

You're looking to use this video in a project where your video will sit on top of other media, like a web page, images, or another video.

Three widespread video formats currently support this: WebM, HEVC With Alpha, and ProRes4444. We're not going to talk too much about the last one, as it is primarily an intermediary format you use between apps on Apple's platforms. HEVC With Alpha and WebM are both highly modern standards, optimized for playing on the web and computers without much processing power, like a mobile phone.

How do I test if my video has a transparent background?

Luckily, you have quite a few options. For example, you can use a video editor like iMovie or Final Cut. You can also use your favorite web browser (with a trick, we’ll get back to that, and you can use Rotato’s free web-based test tool.

1. Rotato’s free, web-based tester

• Works with HEVC in Safari
• Works with WebM in Chrome

This method is helpful if you quickly want to double-check a video that you will use on the web. We've made a quick and free tool that lets you quickly test a video for use in a browser like Chrome and Safari.

Open Rotato's online transparency tester

Watch this quick video to see how it works:

If you still see the black background, that's bad news; your video's background is not transparent. But, if you see the colored gradient background, it works!

To test an HEVC With Alpha video for transparency

1. Open Safari and go to the transparency tester tool
2. Click Choose File and select your mp4 video
3. Once again, the website will attempt to play our video floating above a color gradient.

2. iMovie

• Works with HEVC (mp4)

iMovie is free and most likely already installed on your Mac. You can grab it for free on the Mac App Store here if it isn't. Here's how to test your alpha channel in iMovie

1. Switch to the Backgrounds tab in the top left area
2. Drag one of the backgrounds to the timeline area
3. Drag in your video
4. You should now see the background behind your video

3. Final Cut Pro

• Works with HEVC (mp4)

Final Cut is Apple's professional video editing software. There's a good chance you're using this if you do slightly more advanced video production. For example, if you're using Adobe After Effects or Premiere, the technique is the same: add a background, then add your video on top of that background.

1. Drag your video to the timeline area
2. Go to the Titles and Generators tab in the upper left corner
3. Click Generators
4. Choose a background and drag it to the timeline area below the video you dragged in step 1
5. You should now see the background behind your video.

4. Adobe Premiere

At the time of writing, Adobe Premiere doesn't seem to have full support for HEVC With Alpha, but it does support Prores4444, the intermediate format from Apple. Here's how to use it:

1. Create a new project for your video with transparency.
2. Click the wrench near the video preview area.
3. Click Transparency Grid

If your video has transparency, you should see a checkerboard pattern under the transparent areas.

The wrench icon opens up a menu where you can choose Transparency Grid

Using Chrome Developer Tools

• Works with WebM

While WebM is a free, open-source, and highly efficient format, the makers of video editors don't seem to be keen on supporting it. So here's how to check a WebM file's transparency using nothing but the Chrome app you already have on your Mac or Windows computer.

You can test your WebM file for transparency simply by dragging it into Chrome - but wait! There's a catch! The background will be black by default. So we need to tell Chrome that we want another background

1. Open Developer tools by right-clicking the video and choosing Inspect
2. Click the Elements tab and then the Styles tab
3. In element.stylewrite background:red
4. If your video is transparent, you'll see a red color below your content.

5. Using Safari Developer tools for HEVC/MP4 video files

• Works with HEVC (mp4)

Testing videos in Safari is pretty much the same as in Chrome. The only difference is that you have to enable Developer Tools. You can do that in Preferences, then Advanced, Show Develop menu in the menu bar. After that, you can follow steps 1 to 4 above.

Next steps

Now that you've confirmed that your videos are transparent, it's time to put them to use. Of course, if your project is web-based, there are a few things to keep in mind when writing your HTML. But you're in luck! We have a handy guide to web video transparency here, complete with snippets you can copy and paste.