Time Overlay guide
OBS Timer Overlay: Add a Transparent Countdown Timer to OBS
To add a timer overlay to OBS, export a transparent countdown from Time Overlay and add the file as a source. Use WebM with alpha as a Media Source for the simplest OBS timer overlay, or use a PNG sequence as an Image Slideshow Source when you want frame-accurate loops. Both routes keep the background already cut out, so you do not need chroma key or a green screen.
Recommended Time Overlay export: WebM (with alpha) for most OBS scenes. PNG sequence when you want frame-accurate loops or maximum quality.
- By
- yansoul
- Published
- Reviewed
Workflow map
A predictable file-based OBS workflow
Node 01
Render locally
Node 02
Add as source
Node 03
Record a test
What was verified for this guide
Time Overlay output behavior was checked against the current generator. Source types and PNG alpha behavior were cross-checked against current OBS documentation. Always run a short local recording in the exact OBS version and scene collection used for production.
- Time Overlay can produce a transparent PNG sequence in every supported browser and a VP8-alpha WebM where the browser encoder is available.
- OBS documents Media Source for local audio/video files and Image Slide Show for PNG files with alpha support.
- The guide does not treat documentation review as proof for every GPU, codec build, or OBS plug-in combination.
Step 01
Set the countdown duration and OBS canvas size
Open the Time Overlay generator, pick a duration that matches your starting soon, break, or challenge scene, then set the canvas to the same resolution OBS is recording or streaming at.
Step 02
Place the timer where it will not block the stream
Choose a corner or lower-third placement that avoids your webcam, chat box, captions, and game UI. Simple digits with strong contrast are easier to read after stream compression.
Step 03
Export WebM with alpha for OBS
Choose 'WebM (with alpha)' from the export panel. The output is a transparent VP8 WebM file that OBS can read directly as a Media Source with the background already removed.
Step 04
Add the timer overlay as a Media Source
In OBS, add a Media Source, browse to the downloaded .webm, and enable Loop if the timer should repeat. Resize the source on the OBS canvas until it reads clearly without covering the main action.
Step 05
Use PNG sequence if WebM playback is unstable
If your OBS setup stutters on WebM playback, export a PNG sequence instead and load it through an Image Slideshow Source. This keeps the same transparency but shifts the work from video decoding to image playback.
Step 06
Record a short test before going live
Start a local OBS recording for 10 to 20 seconds. Confirm the timer composites cleanly over the scene, stays readable at stream bitrate, and restarts at the moment you expect.
OBS troubleshooting
Case 01
Symptom
The background appears black instead of transparent
Resolution
Confirm that the exported file actually contains alpha, then remove any chroma-key filter that was added for a different asset. If WebM remains opaque in your build, switch to the PNG sequence and verify one frame first.
Case 02
Symptom
The countdown restarts at the wrong time
Resolution
Open Media Source properties and test the restart/visibility behavior for the scene transition you use. Record a scene switch before relying on it live.
Case 03
Symptom
Playback stutters while streaming
Resolution
Try a 720p asset, shorten the timer, disable unnecessary filters, or use the PNG fallback. Keep a local recording open while checking dropped frames and render load.
OBS timer overlay questions
What is the best timer overlay format for OBS?
WebM with alpha is the best first choice for OBS because it is a single transparent video file that works as a Media Source. Use a PNG sequence when WebM playback stutters, when you need frame-accurate loops, or when maximum visual quality matters more than convenience.
How do I make a timer overlay transparent in OBS?
Export the timer from Time Overlay with a transparent background, then add the WebM file as a Media Source or the PNG sequence as an Image Slideshow Source. The alpha channel is already in the export, so OBS does not need chroma key, luma key, or a green-screen color.
Should an OBS countdown timer be a browser source or a media source?
Use a browser source when you need a live, remote-controlled timer that changes during the stream. Use a media source when you want a designed transparent countdown asset that is predictable, local, and easy to reuse across scenes.
Can OBS loop a transparent countdown timer overlay?
Yes. Add the exported WebM as a Media Source and enable Loop if the countdown should repeat. For scene-based countdowns, also test when the source starts so the first visible frame lines up with your stream transition.
First-party references
These references establish the OBS source behavior used above. Codec behavior can still vary by operating system and installed components.
Time Overlay tips
For most creators, the honest choice is WebM first and PNG sequence second. WebM is easier because it is one transparent video file. PNG sequence is better when you need exact frame control, want to avoid codec issues, or plan to reuse the countdown as a high-quality transparent asset outside OBS.
Not sure which export format to pick? Compare every transparent overlay format by editor and browser support.
Continue with a related workflow
Related guide
How to add a transparent countdown overlay for Twitch (OBS/Streamlabs)
Add a transparent countdown timer to a Twitch stream in OBS or Streamlabs: export WebM (with alpha) from Time Overlay and add it as a Media Source.
Related guide
How to convert a PNG sequence to ProRes 4444 with alpha (ffmpeg)
Convert a Time Overlay PNG sequence to Apple ProRes 4444 with the alpha channel intact using the bundled script or a one-line ffmpeg command.