OBS Timer Overlay
Free transparent countdown timer for OBS Browser Source. No installation — just paste a URL.
Configure your overlay
Quick Presets
Preview
Live preview — the simulated OBS background shows how your timer will look over stream content.
Your OBS Browser Source URL
19201080Setup Instructions
- 1Copy the URL below
Use the generated URL — it has transparent background and stream-safe defaults already applied.
- 2Add a Browser Source in OBS
In your OBS scene, click + in the Sources panel and choose Browser.
- 3Paste the URL and set dimensions
Paste the URL into the URL field. Set Width to 1920 and Height to 1080.
- 4Paste the Custom CSS
In the Custom CSS field, paste the CSS snippet below. This ensures a fully transparent background.
body { background-color: rgba(0,0,0,0) !important; margin: 0; overflow: hidden; } - 5Leave these checkboxes UNCHECKED
"Shutdown source when not visible" and "Refresh browser when scene becomes active" — both will reset your countdown if checked.
- 6Click OK, then position the layer
Drag and resize the browser source layer in your scene. The timer element will float over your stream content.
Frequently Asked Questions
How do I make the timer background transparent in OBS?
The URL above already includes transparent=true which sets a transparent CSS background. Paste the Custom CSS snippet from Step 4 as a belt-and-suspenders measure. No "Allow Transparency" checkbox is needed — transparency is purely CSS-driven in OBS Browser Source.
Why does my timer reset when I switch scenes?
You likely have "Shutdown source when not visible" checked in the Browser Source properties. Uncheck it — this option stops and reloads the browser when you switch away, resetting your countdown.
Will the end chime play through my stream audio?
Yes — by default, browser source audio is mixed into your stream. The URL generated here has the end chime disabled (endChime=false) to prevent unexpected audio on stream. If you want the chime for personal monitoring only, use a separate monitor-only audio device in OBS.
Does this work with Streamlabs, StreamElements, or Twitch Studio?
Yes. All three use the same Browser Source technology as OBS Studio. Follow the same steps — the URL and custom CSS are identical.
What width and height should I use?
1920×1080 (matching your canvas resolution) is the standard choice. The timer element is positioned and sized using CSS — OBS will let you resize and reposition the entire layer in your scene editor regardless of the source dimensions.