HTML to transparent video: WebM and MOV with an alpha channel

RecordHTML records what your HTML page draws and leaves its background out. You get a VP9 WebM with an alpha channel for the web, a ProRes 4444 MOV with alpha for your editor, or a GIF with one transparent colour. Soft shadows, glows and glass panels keep their exact opacity.

VP9 WebM with alpha
ProRes 4444 MOV with alpha
Exact soft edges
Same credits as any recording

Transparent output, setting by setting

Formats: WebM: VP9 with an alpha channel, 4:2:0, at the quality you set. MOV: ProRes 4444 with a 16 bit alpha channel and uncompressed sound. GIF: one palette entry is transparent, and every pixel under half opacity uses it.
MP4: H.264 in MP4 has no alpha channel. Tick Transparent background with MP4 selected and the recorder switches to WebM.
What turns transparent: The page's own html and body background is removed. Everything it draws stays, with its own opacity: rgba colours, shadows, blurred glows, canvas, WebGL and video. A background painted by an element, such as a full size div, stays too.
Size: Up to 3840 pixels wide, because the alpha is captured beside the picture. Crop and output size work as usual, and the bars of Fit inside come out transparent instead of coloured.
Price: The same credits as an opaque recording of the same size and length, on every plan, the free one included. Transparency is a setting, not an upgrade.

A lower third with nothing behind it

This name card and LIVE tag come from an HTML page that paints no background. The WebM plays here over a checkerboard: the card's glass, the logo's glow and the soft shadows let it show through, as they would over your footage.

Transparent lower third, 1280×720

1280×720 · 30 fps · VP9 with alpha · 6 s · 180 frames · 461 KB

Recorded from an HTML overlay that paints no background. Open the creative · Download the file

Measured: one overlay in three transparent formats

We recorded our 1280×720 lower third for 6 seconds on November 7, 2026, changing nothing but the format.

Measured: one overlay in three transparent formats
Format	Frames	File size
WebM, VP9 with alpha, 30 fps	180	461 KB
MOV, ProRes 4444 with alpha, 30 fps	180	53.5 MB
GIF with transparency, 15 fps	90	2.0 MB

The MOV is 116 times the size of the WebM: ProRes keeps every frame whole at editing quality, which is what an editor wants and a web page doesn't. The GIF is larger than the WebM because the moving card is stored again in every frame.

How the alpha is captured

RecordHTML loads your page once, in a frame on a black canvas. Beside it, the same frame's transparency is drawn as a white shadow, so every captured frame holds the colour over black and the alpha next to it. The encoder divides one by the other, pixel by pixel. Both come from one paint of one page, so they always line up, for canvas, WebGL, video and cross origin frames too.

Which format for which job

WebM is for the web: Chrome, Edge and Firefox play its alpha in a video tag, while Safari ignores the alpha. ProRes 4444 MOV is for Premiere Pro, Final Cut Pro, After Effects and DaVinci Resolve. A GIF suits stickers and chat, where hard edges are acceptable.

Get the page ready

Draw anything meant to be see through with real transparency: an rgba colour, opacity, or a PNG with alpha. Fonts and images load as in any HTML to MP4 recording. If the overlay waits for its assets, call trim_start() when it begins to move, so the video opens on its first frame.

How it works

Step 1
Paste the overlay's URL or upload its ZIP; its size is filled in.
Step 2
Choose WebM, MOV or GIF, tick Transparent background, and set the frame rate and length.
Step 3
Record. A transparent WebM is previewed over a checkerboard so you can check its edges; a MOV is ready to download for your editor.

Frequently asked questions

Can I make a transparent MP4?: No. H.264 in MP4 has no alpha channel, so no player could show the transparency. Choose WebM for browsers or MOV for editing; both keep it.
Does the WebM stay transparent in every browser?: Chrome, Edge and Firefox play VP9 alpha. Safari doesn't show the alpha channel, so give Safari visitors an image or a file made for it.
Which ProRes profile do I get?: ProRes 4444 with a 16 bit alpha channel, the profile editors use for graphics with transparency. Without transparency a MOV is ProRes 422 HQ, unless you choose 4:4:4.
Will shadows and glows look right?: Yes. Each pixel keeps its own opacity, so a shadow that fades out stays a fade and a translucent panel stays translucent. Only GIF reduces this to fully shown or fully clear.
My page has a white background. What happens?: The html and body background is removed for you. A background painted by another element, a full size div or an image, stays in the video; take it out of the page for a clean overlay.
How long can a recording be?: Recordings can be up to 60 seconds long. A transparent one costs the credits of any recording with its size and length.
Can I record a Lottie or Rive animation with transparency?: Yes. Upload the file and it plays in a page with no background: see Lottie to video and Rive to video.

Lottie to videoAnimated badges and icons, transparent at any size.Rive to videoArtboards, timelines and state machines as video.Transparent video from codeSend transparent: true with format webm or mov.

Record a transparent video

10 credits free every month · No card needed