A name tag that slides in, a subtitle that fades, a logo sting: these are quick to build in HTML and CSS, and with web2vid they become a video file with a real alpha channel that sits on top of your footage.
The short version
- Build the title as a web page with a transparent background (
html, body { background: transparent }). - In web2vid, set the size to your project’s size (usually 1920 × 1080, the Full HD preset) and the FPS (under Advanced) to your project’s frame rate, for example 25 or 30.
- Set Format to .mov (ProRes 4444) and keep Transparent ticked.
- Render, then drag the
.movonto a track above your clip.
Why ProRes 4444 MOV
ProRes 4444 stores transparency at full quality and is understood natively by DaVinci Resolve, Premiere Pro, Final Cut Pro and After Effects. The files are large, but that’s the point: no compression artefacts at the soft edges of your text or shadows.
WebM also has transparency, but most video editors don’t read its alpha channel, so stick to MOV for editing.
Tips for titles that look right
- Match the frame rate of your project, or motion may look slightly uneven.
- Leave the timing to CSS. For example
animation: slide-in 0.6s ease-out both. Because web2vid steps the clock exactly, what you see in the preview is exactly what you get. - Hold, then leave. Give the title a still middle part and an exit animation, and set the Duration to cover all of it.
- Keep text inside the safe area: roughly 5–10 % in from every edge.
To start quickly, Code → New HTML in the app gives you a small transparent template that you can turn into your title, with a live preview as you type.