What Is an OBS Timer Overlay?

An OBS timer overlay is a live clock that sits right on top of your stream or recording. Unlike grabbing your phone or running a separate desktop timer, an overlay is part of your broadcast — viewers see it directly.

CleanStopwatch renders as an HTML page that OBS loads as a Browser Source. You get a transparent, customizable timer without a single plugin or download.

People use them for all sorts of things:

Starting Soon screens — a countdown before you go live builds anticipation
Speedrun timing — precise stopwatch for tracking run splits
Study-with-me streams — Pomodoro timers show work/break cycles to viewers
Giveaway countdowns — a visible timer adds urgency and engagement
Segment pacing — show how much time remains in the current segment

Timer Modes for Streamers

Before you set anything up, figure out which mode fits your stream:

Mode	What It Does	Best For
Stopwatch	Counts up from 00:00	Speedruns, tracking stream duration
Countdown	Counts down from a set time	Starting Soon screens, giveaways, timed segments
Pomodoro	Cycles work/break intervals	Study streams, co-working sessions

Switch between modes on the fly from the timer page or lock in a specific mode using the Configurator.

Step 1: Configure Your Timer

Open the CleanStopwatch Configurator to customize your overlay.

Mode and Timing

Pick your timer mode and set your default duration. For a Starting Soon countdown, try 3-5 minutes. For a study stream, go Pomodoro with 25/5 intervals.

Visual Settings

Accent color (Pro) — pick a hex color that matches your channel branding
Background — toggle to Transparent to remove the card. The timer digits float directly on your stream
Border radius — set to 0 for a sharp look, or add some rounding for something softer
Font size — choose something readable at your stream resolution
Font — pick from the available system fonts

Preview

The preview updates in real time as you tweak things. When it looks right, grab the Live Embed URL at the bottom.

Step 2: Add to OBS Studio

Open OBS Studio.
Select the scene where you want the timer overlay.
In the Sources dock at the bottom, click the + button.
Choose Browser from the context menu.
Enter a name like “Stream Timer” and click OK.
Paste the CleanStopwatch Embed URL into the URL field.
Set the Width and Height:
- Compact timer: 300 x 100
- Full countdown: 400 x 200
- Pomodoro with interval display: 400 x 250
Check the other settings:
- Custom CSS: leave it empty unless you’re doing advanced styling
- Refresh browser when scene becomes active: check this if you want the timer to reset every time the scene loads
Click OK.

The timer shows up on your canvas. Drag it where you want and resize as needed.

Step 3: Make It Transparent

Want just the timer digits floating on your stream? Here’s how:

In the Configurator, find the Background toggle.
Set it to Transparent.
Copy the new embed URL.
In OBS, right-click the Browser Source Properties.
Replace the URL with the new transparent version.
The background vanishes, leaving only the timer text.

The transparent mode uses an alpha channel, so the timer blends right into your game or camera feed. No white box, no fuss.

Step 4: Position on Your Stream

Good placement keeps the timer visible without covering up anything important.

Stream Layout	Suggested Position	Size
1920x1080 (standard)	Top-right or bottom-right	400x200
1664x936 (60% canvas)	Inset corner	320x160
Vertical / Mobile vertical	Top center	200x100
Fullscreen game	Any corner, small	250x80

Advanced: Custom CSS in OBS

Need something the Configurator doesn’t offer? Use OBS’s Custom CSS field in the Browser Source properties:

/* Add text shadow for readability over bright game footage */
body { text-shadow: 2px 2px 6px rgba(0,0,0,0.9); }

/* Change font weight */
.timer-display { font-weight: 900; }

/* Reposition content within the browser source */
body { display: flex; align-items: center; justify-content: center; }

Changes show up right after you hit save — no need to refresh OBS.

Troubleshooting

Timer doesn’t appear. Double-check the URL starts with https://cleanstopwatch.com/embed?. Also make sure the Browser Source dimensions are big enough to show the full widget.

Timer has a white background. Make sure you toggled Background to Transparent in the Configurator. If you already did, copy the URL again — the transparent setting lives in the URL itself.

Timer is too small or too large. Adjust the Browser Source width and height in OBS. You can also change the font size in the Configurator.

Timer resets unexpectedly. Check if “Refresh browser when scene becomes active” is turned on. That setting is useful for countdowns that should restart each scene load, but turn it off if you want the timer to persist across scene switches.

FPS drops. CleanStopwatch uses very little CPU/GPU. If you’re seeing performance issues, try reducing the Browser Source resolution or closing other browser sources.

Timer doesn’t sync with stream start. If you want the timer to start exactly when you go live, pause it before the stream starts, then unpause on cue. The timer stays put while paused, no time lost.

Why CleanStopwatch for OBS

Feature	CleanStopwatch	Other Solutions
Setup time	~60 seconds	Often requires registration or plugin install
Transparent overlay	One toggle in Configurator	Complex CSS or no support
Modes	Stopwatch, Countdown, Pomodoro	Usually only countdown
Custom colors	Full hex picker (Pro)	Limited presets
Plugin required	No (standard Browser Source)	Often yes
CPU/GPU usage	Minimal	Varies widely
Works offline	Internet required for initial load	Same

Quick Start Summary

Open Configurator — set mode, colors, and transparent background
Copy the Embed URL
In OBS: Add Browser Source — paste URL — set dimensions
Position and resize on your canvas

Start building your overlay: cleanstopwatch.com/configurator

Custom OBS Timer Overlay for Streamers — More advanced configuration tips and use cases.
Free Online Stopwatch for Gaming & Speedruns — How to use CleanStopwatch for speedrun timing.