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

Isn't it interesting that everything in the real world has a transparent background, and nothing, at least by default, has one when it comes to computers? The reason is, well, it's complicated. But once you get the hang of it, you can start using transparency almost anywhere, without spending too much time. In this guide, we show you how.

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.

Converting videos to formats that support alpha transparency

To get your videos with transparent backgrounds online, you'll need two versions of the video. In this guide, we'll show you how you can convert your videos in one single click, for free.

Testing alpha (transparency) in videos

It might look like your video has a black background, even when it is in fact transparent. Before you export that video again, take a look at these 5 easy ways to reveal an alpha channel. Or, you know, just head to our (free online transparency testing tool)[/tools/transparent-video] that does exactly this.

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.