Keep the page
transparent.
Leave html and body without a background colour, so only your elements are visible.
TRANSPARENT VIDEO FROM HTML
Export HTML animation
with transparency.
Render titles, lower thirds and overlays from HTML as video with an alpha channel: ProRes 4444 MOV, VP9 WebM or PNG sequence, ready for Premiere Pro, DaVinci Resolve, Final Cut and OBS.
How to make a transparent video from HTML
Keep the page
Open it
in the studio.
Import the HTML file or paste the code. Turn on transparency in the export settings.
Choose
an alpha format.
ProRes 4444 MOV for editing apps, WebM VP9 for the web and OBS, or a PNG sequence for compositing.
Place it
over footage.
Drag the file onto a track above your video in Premiere Pro, Resolve, Final Cut or After Effects.
A transparent lower third
No background on the page, just the graphic. Render it with transparency on:
<style>
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; }
.third { position: absolute; left: 80px; bottom: 90px; padding: 22px 44px; border-radius: 10px;
background: #345cff; color: white; font: 600 46px system-ui;
animation: slide .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes slide { from { transform: translateX(-120%); } to { transform: none; } }
</style>
<div class="third">Alex Morgan · Product Designer</div>Which transparent format to choose
| Format | Use it for | File size |
|---|---|---|
| MOV (ProRes 4444) | Premiere Pro, DaVinci Resolve, Final Cut, After Effects | Large, edit-friendly |
| WebM (VP9 with alpha) | Web pages, OBS overlays, lightweight sharing | Small |
| PNG sequence | Compositing and frame-by-frame work | Largest, lossless |
| MP4 (H.264) | Not for transparency: MP4 has no alpha channel | — |
Tips for clean alpha edges
- Avoid a page background. Any colour on html or body fills the whole frame and hides the footage.
- Soft shadows work. Shadows and glows keep their partial transparency in ProRes 4444 and PNG.
- Check in your editor. Place the clip over a bright and a dark shot to check the edges.
- Use MP4 for previews only. MP4 cannot store transparency, so keep it for client previews on a background.
Transparent video questions
Can I export an HTML animation with a transparent background?
Yes. Keep the page background transparent, turn on transparency and export ProRes 4444 MOV, VP9 WebM or a PNG sequence.
Why is my MP4 not transparent?
The MP4 (H.264) format has no alpha channel. Use MOV with ProRes 4444 or WebM with VP9 for transparency.
Does the transparent MOV work in Premiere Pro and DaVinci Resolve?
Yes. ProRes 4444 with alpha is a standard format for overlays in Premiere Pro, DaVinci Resolve, Final Cut Pro and After Effects.
Can I use transparent WebM in OBS?
Yes. OBS media sources play VP9 WebM with alpha, which suits animated overlays and lower thirds for streams.
More ways to make video from code
Try it free for 7 days.
Free download from the Microsoft Store. No payment card needed for the trial.