
Until recently, videos with transparency was not a thing on the web. Well, not entirely true: it's been a thing since [Chrome version 31](https://developers.google.com/web/updates/2013/07/Alpha-transparency-in-Chrome-video), released all the way back in 2013. But even though chrome has more than 2 billion users by now, it's not enough. We still have half a billion on Safari, and more than 1 billion iOS users, who can only use Safari as their browser, even in other apps. In 2019, Apple launched support for [HEVC With Alpha](https://developer.apple.com/videos/play/wwdc2019/506/). We now have have billions of browsers supporting alpha channel videos. But not in the same way; you need a WebM video for your Chrome videos, and a HEVC video for your Safari users. 

In this post, I'll show you various ways to do that. You may also find this interesting if all you want is to convert a video to WebM. 

Here's what we'll go through today:

{{TOC}}


## What is WebM? 
WebM is Google's completely free video format, launched in 2010. It offers high quality, small file sizes, and is optimized for the smaller processors in mobile phones. From 2013, WebM also supported alpha transparency channels. Supported browsers are Chrome, Firefox, Opera, Edge, and, to a certain extent Safari on macOS Big Sur (2020) and newer. When I say "certain extent", it means yes, it's supported — but no transparency. 

## What is HEVC With Alpha? 
HEVC is really just another name for H.265. That means it's in direct lineage with H.262 MPEG-2, the DVD format. Like WebM, HEVC was made with high quality, low file size and mobile devices in mind - and alpha transparency. Supported browsers are Safari on macOS and iOS, and the Android browser. Edge technically supports it, but needs the right hardware, so I wouldn't rely on it fully. 


## How do you convert a movie to WebM?
There are a number of converter apps out there. Most of them are free and open source, but not all of them are easy to use. In fact, some of them are so complex that command line tools seem more simple. Let's dive in and take a look at the most popular apps for video conversion. 

### Handbrake
![The macOS app Handbrake](/blog-image/handbrake.png)
Almost 20 years old, this app is famous among the DVD ripping generation of the 2000s. It has a very wide array of settings—to the point where it's just confusing. We haven't been able to get Handbrake to make a VP9 WebM with alpha channels yet. 

[Download Handbrake](https://handbrake.fr/). Free.

### Adobe Media Converter
![Adobe Media Encoder](/blog-image/adobe-media-encoder.png)

Slightly easier to use, but still complex, this tool is also a classic, mostly used by users of Adobe Creative Cloud. Be warned though, it's not free, and you get a bonus always-running Adobe Updater running next to the top right clock. Additionally, it might not install on your Apple Silicon Mac (we tried and failed in November, 2021)

[Adobe Media Encoder](https://www.adobe.com/products/media-encoder.html). Not free. 

### Shutter Encoder
![Shutter Encoder](/blog-image/shutter-encoder.png)

A less known free alternative, and the simplest of the complex, Shutter Encoder's 1960ies car-inspired UI lets you convert between a wide range of formats. The advanced settings are packed away in a separate area, which is where you'll find the switch for preserving transparency, which is off by default. Alas, we have not been able to make this work yet. 

[Shutter Encoder](https://www.shutterencoder.com/en/). Free.

### Rotato Converter
![Rotato Converter](/blog-image/rotato-converter.png)

Honestly, we made this because we couldn't make the other tools work, or they were too complicated for a simple task like this. We may add more formats to the app, but right now it does one thing well: convert a video to WebM and HEVC With Alpha, while preserving transparency. That's it. 

[Rotato Converter](/tools/converter). 


## How do you convert a video to HEVC With Alpha? 

If you have a ProRes4444 video with alpha, converting to HEVC is simple. You can use the Rotato Converter here, but you really don't need an external app for this, as your Mac already knows how to do it. 

1. Right click the video file you want to convert
2. Choose Encode Selected Video File
3. Set the format to `HEVC` and check `Preserve Transparency`

Heres' what it looks like

![macOS finder encode media screenshot](/blog-image/finder-converter.png)


## Using Rotato Converter

Here's a short video:

<Embed url="https://vimeo.com/649995074"/>

There's really just one step:

1. Drag in your ProRes or HEVC video

Rotato Converter saves the converted videos in the same folder as the original. If your original video was named `My Product Video.mp4`, the converted videos will be called `My Product Video-vp9-chrome.webm` and `My Product Video-hevc-safari.mp4`. 


## How do you double check that your video has alpha transparency?

QuickTime and QuickLook (in Monterey) don't show alpha channels, so you have to look elsewhere. Luckily, there's a few simple ways to do this. Read more in our [Guide to Testing Video Transparency](/blog/test-video-transparency) or take a look at the two options below using Rotato's free tools.

### Testing in Rotato Converter

Simply by dragging your file to Rotato Converter, you'll see if the video has an alpha channel. If the background behind the video is a checkered pattern, that means "yes"!

![Screenshot showing a working alpha channel with visible checkers](/tools/converter/converter-working.png)

Alas, this doesn't work for WebM, only HEVC With Alpha and ProRes4444 with alpha. 

### Testing on the web

If you watched the video above, you may have noticed that Rotato Converter shows two buttons when it's finished: Test in Chrome and Test in Safari. What these buttons simply do is to take you to Rotato's [Video Transparency Tester](/tools/transparent-video), and revealing the relevant file in a finder window on top. 

Here's a video that shows exactly what that looks like: 

<Embed url="https://vimeo.com/650009065"/>


## Final thoughts

Video formats are not as easy as they could be, once you decide you want to move out of the safe space of embedding Vimeo and Youtube. 

The good news is, if you do this, you'll most likely have an edge over other designers and developers who decide that it's just too much work. I hope I've shown you that converting and testing videos with alpha transparency isn't as complicated as it looks, especially not with the free tools above. 

Design showcasing is all about getting your design in front of people, and helping them grasp your ideas quickly. Check out the resources below to learn how to increase buy-in, get more clients and get your dream job.


Learn how to present & showcase your design.

Showcasing Guides for UX Designers

guides

converting-videos

Alpha Transparency in Chrome and Safari: How to convert to the WebM and HEVC formats

You've made a video with transparency—or so you think! Because how do you test it? Normally, to preview your moving picture masterwork, you'd simply 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 popular trick has been to hit space on a video to see it in QuickLook. Well, it turns out 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:

{{TOC}}

## 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](/help/transparent-background)). 

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 even another video. 

Currently there are 3 widespread video formats that supports this: WebM, HEVC With Alpha and ProRes4444. We're not going to talk too much about the last one, as it is mostly an intermediary format; a 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 on computers without a whole lot of processing power, like a mobile phone.

## How do I test if my video has a transparent background?
Luckily, you have quite a few options. 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 is useful if you quickly want to double check a video that you're going to use on the web. We've made a quick and free tool for you that lets you quickly test a video for use in a browser like Chrome and Safari. 

Open [Rotato's online transparency tester](/tools/transparent-video)

Watch this quick video to see how it works:
<Embed url="https://vimeo.com/650009065"/>

As you may know, today's browsers support transparent videos, and have done so for a while, but they don't understand the same formats. Chrome plays `webm` videos and Safari plays `mp4`with the HEVC codec. See our guide on [web video transparency](/blog/transparent-videos-for-the-web) to learn how to add both to one page and let the browser pick.

Now, let's get into testing the two formats. First, Chrome - and thereby Webm with alpha channels. 

**To test a WebM file for transparency:**
1. Open Chrome and go to the [transparency tester tool](/tools/transparent-video)
2. Click the **Choose File** button and select your webm video
3. The website will now attempt to play your video on top of a colored background. If you see a black background, that's bad news; your video's background is not transparent. If you see the colored background, it works! 

**To test a HEVC With Alpha video for transparency**
1. Open Safari and go to the [transparency tester tool](/tools/transparent-video)
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)

<Embed url="https://vimeo.com/650007434"/>

iMovie is free and most likely already installed on your Mac. If it isn't, you can grab it for [free on the Mac App Store](https://apps.apple.com/us/app/imovie/id408981434?mt=12) here. 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)

<Embed url="https://vimeo.com/650007388"/>

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. 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. Using Chrome Developer Tools
* Works with WebM

While WebM is a free, open source, and highly efficient format, it's unfortunately not very commonly supported by video editors. Here's how to check a WebM file's transparency using nothing but the Chrome app you already have have on your Mac or Windows computer. 

<Embed url="https://vimeo.com/649995030"/>

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.style`write `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)

<Embed url="https://vimeo.com/649995003"/>

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, then Show Develop menu in menu bar. After that, you can follow steps 1 to 4 above. 

### Next steps
Now that you've confirmed that your videos are in fact transparent, it's time to put them to use. If your project is web-based, there are a few things to keep in mind when write your HTML. But you're in luck! We have a handy [guide to web video transparency](/blog/transparent-videos-for-the-web) here, complete with snippets you can copy and paste. 

test-video-transparency

5 Quick Ways to Test Alpha Channel/Transparency in videos

Backgrounds are great for setting the context of your mockup animation. You can hint at the app’s personality, tone of voice, or give the impression that app is being used outdoors, or on a coffee table. 

But let me just warn you right off the bat: it’s really easy to accidentally add too much noise to your slick animation. If the background becomes too busy, it moves the viewer’s attention from the mockup to the background—and that’s rarely what you want. 

So let’s take a look at a few different types of backgrounds that will inspire you for your next app showcase video. 

## Photo backgrounds

Plain old and simple. Just drag in an image with the same dimensions as your mockup canvas. You could show a table, a forrest or a blue sky. One thing to consider here is that if you animate the mockup on top of a photo background, it can look weird; the two elements are no longer in sync. I found this beautiful background for free [on Unsplash.](https://unsplash.com)

<Embed url="https://vimeo.com/574463601"/>

But there’s a few exceptions to this rule of thumb. One of them is a gradient background, so let’s take a look at that next.

## Gradients

Here, I’ve dragged in simple radial gradient in my brand’s green color, and that looks pretty good. You can experiment with linear gradients to create a kind of atmospheric look. You can also give a very subtle gradient a shot, adding just a hint of interestingness to the scene without shouting “hey! Here’s a gradient! I’m using a gradient!”

<Embed url="https://vimeo.com/574479346"/>

Okay, let’s move on to something slightly more advanced - and very true to Rotato’s 3D nature. 

## Environment images

Take a look at the video below, and note how the background actually moves along with the camera. The trick I used here is an environment image. So how do you go about creating this seemingly black magic? It’s almost embarrassingly simple; just use an image that is exactly twice as wide as its height. So, 1000x500 pixels as an example. 

One thing to note here is that Rotato will wrap the image in a globe-like shape, and put you, the mockup and the camera right in the center of it. So, as you might have guessed, that will create distortions at the north and south poles, and also how many pixels you give it. As a rule of thumb, go for big images here. 

Let’s look at the example from above, but this time as an environment image
<Embed url="https://vimeo.com/574462823"/>

And another one, with a repeated pattern from [StockTextures](https://freestocktextures.com/texture/willow-pattern-by-william-morris,1435.html) 

<Embed url="https://vimeo.com/574466918"/>

I don’t know if you saw it, but if you look closely at the iPhone mockup’s screen glass, it actually shows your environment image reflected! Neat, huh?

Next, let’s take a look at a small trick that will give you full control over the reflections 

## Matched environment background

Let’s say we love the reflections in the glass, but we want to tone done that noisy background a bit. And when I say “a bit” I mean “completely”. We can now simply pick another background color, and Rotato will remember the reflection environment and use your new background. 

In the video below I went all in and used the color picker to get the exact same tone of green as is reflected ont he device. This gives me an interesting effect where the phone mockup becomes extremely subtle, leaving only a hint of a device mockup, while guiding the viewer’s eye towards the place with the real action: the app on the screen. 

‍<Embed url="https://vimeo.com/574466974"/>

As you've seen, the possibilities are pretty much endless. Open Rotato and start experimenting!

‍


How can we help?

Getting started

Quick Start: Make a video

Quick Start: Make an image

Tutorial Index

Importing

Editing

Animating

Exporting

App Store Screenshots

Orders & Licenses

Using Templates

Guides

Alpha Transparency in Chrome: How to convert to the WebM format

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

Use any background for your device mockup showcase

Found everything fine?

Will Rotato work on my computer?

Is there a Windows version?

‍How can I use transparent background in my videos?

Will there be a Figma plugin?

Can I use my own 3D models?

Is there a student discount?

Rotato

Explore

About

Help