Highlights

  • Videos with transparency on the web used to be a no go. Now it's possible.
  • An alpha channel is a movie in the movie that describes what is invisible, partly invisible and what's fully visible

The Big Guide to Transparent Backgrounds in videos and images

Learn how to master transparency in your videos and images—and use them on the web, in presentations, and other apps
By Rotato
· 5 minutes

For everyone

Transparent videos for the web

You may have found answers on the web telling you that this is not possible. Well, it is possible - now. Chrome was the first browser to OK alpha channels in videos, and Safari followed suit in 2019 with Catalina. That means that in 2021 it's rather safe to go for transparency on the web! That said, we'll also take a look at how to cheat and get what we want in the simplest possible way.

Using a PNG sequence in Final Cut Pro

In this tutorial, we'll immerse a phone mockup in soft detailed smoke, both in front of the phone and behind it. We'll use a PNG sequence and a technique called keying to make the smoke video transparent—even if it was in fact not transparent to begin with.

For Rotato users

Exporting a video with a transparent background

Rotato supports transparency in a variety of ways depending on what you need. Here's how to do it.

Exporting a PNG with transparent background

Export still shots you can use on top of any content in virtually any app.

Using an image, video or color as a scene background

Sometimes, you don't need transparency to achieve what you need. Let's dive in to the various ways to get almost any background in Rotato.

Why transparency is weird

If you've ever tried to use transparency in a video project, chances are you've been slightly frustrated. It's almost as if our tools refuse to acknowledge the existence of transparency.

Why is that? 

The short explanation is that humans and computers think of transparency — or invisibility — totally differently. To us, it's just something we see partially, like a window, or not at all, like air. The rules of physics and light beams dictate that we see whatever is behind the transparent object. And that makes it simple for us.

To a computer, it's different. When you see a pixel on the screen, it doesn't know that there's stuff below it. It's just a pixel. So it takes a lot of computing power to calculate the illusion of transparency.

So computers have used a variation of techniques over the years. Those who were around at the age of the GIF may recall that transparency was just a color. So it was either fully visible or not at all. When PNG came around, we could suddenly play with alpha channels.

What's an alpha channel?

Think of it as a movie in the movie. In fact, your movie is made up of several channels. Commonly, there is a red, blue and green channel. And then there's the alpha channel. If you were to watch the alpha channel on a movie with transparency, you'd see various tones of gray corresponding to where the movie is transparent. When you see white, that means no transparency. Black means fully invisible. Gray tones means semi-transparency.

But luckily, you don't have to worry about this. All you need is to understand which formats to use for which jobs.

And this guide will help you with that.

Next steps

How to do it with Rotato

Examples from Rotato

Example
using the
iPhone 12 Pro
mockup
Video showing a
Transparent background
using the
iPhone 12 Pro
mockup
No items found.

More mockup guides