The Big Guide to Transparent Backgrounds in videos and images

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 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. So that means that in 2021 it's relatively safe to go for transparency on the web! That said, we'll also look at how to cheat and get what we want in the simplest possible way.

Using a PNG sequence in Final Cut Pro

This tutorial will 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. This guide will show you how to convert your videos in one 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. So before you export that video again, take a look at these five easy ways to reveal an alpha channel. Or, you know, head to our (free online transparency testing tool)[/tools/transparent-video] that does precisely this.

Hosting your transparent videos on the web

If you don't have direct access to the file system on your webserver it can be a bit tricky to get your transparent videos online. In this guide, we'll show you two super fast (and free) ways to host your movies with alpha transparency.

For Rotato users

Exporting a video with a transparent background‍

Rotato supports transparency in various ways, depending on what you need. Here's how to do it.

Exporting a PNG with a transparent background

How to 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 into the various ways to get almost any background in Rotato.

Using a PNG sequence

You can go for a PNG sequence when you need that extra flexibility, rendering each frame as its own individual PNG image file with a transparent background. Then, you can import that sequence straight into professional video editing packages like Adobe After effects, Final Cut and Premiere.

Using clips with transparency in Filmora

The powerful Filmora app may seem at first glance to not support importing clips with transparency. But there is a way.

Why transparency is weird

If you've ever tried to use transparency in a video project, 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. However, 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 variety 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. Then, 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. 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 represents entirely invisible. Gray tones mean 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.