OBS Timer Overlay
Create a free OBS timer overlay as a transparent browser source. Choose a duration and label, copy the generated URL, paste it into OBS, set the source to 1920×1080, and leave reset-on-scene-switch options unchecked.
Configure your OBS timer overlay
Quick Presets
Preview
Live preview — the simulated OBS background shows how your timer will look over stream content.
Use this URL in an OBS Browser Source. Select the field to copy manually if clipboard access is blocked.
19201080Setup Instructions
- 1Copy the URL below
Use the generated URL — it has transparent background and stream-safe defaults already applied.
- 2Add an OBS Timer Browser Source
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.
- 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 add an OBS timer browser source?
Copy the generated URL, add a Browser Source in OBS, paste the URL, set the source dimensions to 1920×1080, paste the transparent-background CSS if needed, and leave “Shutdown source when not visible” and “Refresh browser when scene becomes active” unchecked.
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, XSplit, or vMix?
EasyTimer.app works in streaming tools that can load browser sources, including Streamlabs Desktop, StreamElements overlays, XSplit, vMix, and OBS Studio. Legacy Twitch Studio installs may still load browser sources, but Twitch Studio is no longer supported by Twitch.
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.
Should I use /obs, /obs-timer, or /stream-timer?
Use /obs for the OBS Browser Source setup guide: transparency, custom CSS, source dimensions, and reset-on-scene-switch troubleshooting. Use /obs-timer for the ready-made OBS countdown overlay URL. Use /stream-timer for a platform-agnostic Twitch, YouTube, Kick, Streamlabs Desktop, XSplit, or vMix countdown.
More timers
Set any duration on the homepage timer.
Short (10–25 min)
Long (30+ min)
By use case
- Classroom
- Stream
- Presentation
- Fullscreen
- OBS Timer
- Interval
- Tabata
- Relax
- Happy Cat
- Playful Cat
- Black Cat
- Airplane
- Paper Plane
- Flight Path
Need a section-by-section agenda timer? Open the presentation flow timer.