A lower third generator with transparent output
A lower third is the name-and-title bar that appears in the lower part of the screen when someone is introduced in a video or a live stream. This lower third generator builds one from your name, title, colours and a system font, and gives it back as something your editor or streaming software can lay over footage: a transparent PNG, an animated WebM, a ZIP of PNG frames, or a self-contained HTML file that animates itself.
Four styles (accent bar, two-tone, rounded card and a box-less underline) slide in, hold and slide out with timings you control. Everything is drawn in your browser from your own text, so there is no sign-up, no watermark and no upload, and the fonts are the ones already on your computer.
How to use the Lower Third Generator
- Type the name and the title, then pick a style and a position.
- Choose the output size: a full 1920 × 1080 or 1280 × 720 frame with the bar placed for you, or a bar-only image (1200 × 240 or 1800 × 360) to position yourself in an editor.
- Set the accent, box and text colours and the slide-in, hold and slide-out times, then press “Play animation” to preview.
- Export the PNG still, the WebM, the PNG frames or the HTML file. Use the “Preview behind” menu to check legibility on a dark or busy background.
- Place the file above your video: as an image or video layer in an editor, or as an image or local-file browser source in your streaming software.
Lower Third Generator features
Four ways to export
Still PNG, a recorded WebM, a ZIP of 30 fps PNG frames and a self-animating HTML file, from the same design.
Transparent by design
The canvas is cleared before drawing, so everything outside the bar is alpha 0 in the PNG and the frames.
Animation you can time
Set the slide-in, hold and slide-out in seconds. The box wipes open first, then the text slides in and fades up.
Frame or bar-only sizes
Full frames at 1920 × 1080 and 1280 × 720, or compact bars at 1200 × 240 and 1800 × 360.
HTML that is safe to share
Your text is escaped in the HTML file, which has no scripts and no external links.
Private
No account, no tracking of your text, no files leave your device.
Which export should I use?
The WebM is recorded in real time from a canvas using your browser’s own encoder, so its length equals the animation length and its transparency depends on the browser. If your editor shows black or white behind it, use the PNG frames instead.
| Format | Keeps transparency? | Best for |
|---|---|---|
| PNG (still) | Always | A static name plate on a timeline; you animate it in your editor. |
| PNG frames (ZIP) | Always | Editors that import an image sequence; import at 30 fps. |
| WebM | Recent Chromium only (Chrome, Edge); other browsers may fill the background | A ready-made animated clip. Test it in your editor first. |
| HTML | Always (the page background is transparent) | Live streams: add it as a local-file browser source. |
How to use the HTML file in OBS
In OBS Studio choose Sources → + → Browser, tick “Local file”, select the HTML file and enter the same width and height as the output size (for example 1920 × 1080). The page background is transparent, so only the bar shows. The animation plays once when the source loads; tick “Refresh browser when scene becomes active” to replay it each time you switch to the scene, or tick the loop option here to repeat it with a short pause. Other streaming programs that support browser sources work the same way.
Worked example: timing a title
With the defaults the box opens in 0.8 s, the text finishes fading in about 0.8 s after the start, the bar stays for 4 s and slides out over 0.6 s, so the whole animation is 0.8 + 4 + 0.6 = 5.4 seconds, or 162 frames at 30 fps. That is long enough to read a name and a short title (roughly 15 characters per second is a comfortable reading speed) without crowding the picture.
Tips for readable lower thirds
- Keep the name under about 30 characters and the title under 40; the tool warns when the text is wider than the chosen size.
- Leave the bar in the lower third and away from the very bottom edge; some displays crop the outer 5% of a frame.
- Use strong contrast between text and box; a box opacity of 85–100% reads well on busy video.
- Match your accent colour to the rest of your branding, and keep the same style for every speaker.
Lower Third Generator FAQ
What is a lower third?
A graphic in the lower part of the screen that names a speaker or a location. The name comes from placing it in the lower third of the frame.
Is the output really transparent?
The PNG, the PNG frames and the HTML file always are. WebM transparency depends on the browser: recent Chrome and Edge keep it; check the result in your editor.
Which size should I choose?
Pick a full frame if your video is 1920 × 1080 or 1280 × 720, so the bar is already in place. Pick a bar-only size if you want to position the bar yourself in an editor.
Can I use it for live streams?
Yes: download the HTML file and add it as a local-file browser source in OBS or similar software. There is no hosted service to sign up for.
Why is my text cut off or flagged as too wide?
The bar must fit the chosen size. Shorten the name or title, or pick a wider output.
Are the fonts embedded?
No. The exported image uses fonts already installed on your computer, and the HTML file names system font stacks, so it looks slightly different on other machines.