Custom OBS Timer Overlay for Streamers

Why Streamers Use OBS Timer Overlays

An OBS timer overlay makes pretty much any stream look better. It is one of those small touches that makes your broadcast feel intentional instead of thrown together. Here is what people actually use them for:

• Starting Soon screens. A countdown builds hype before you go live. Viewers know exactly when the stream starts and it gives latecomers time to show up.
• Study-with-me streams. Pomodoro timers show work and break cycles to viewers. People find it motivating to watch someone else work while they work.
• Speedruns. Precise stopwatch tracking for split times. Your viewers can see exactly how the run is going without you saying a word.
• Giveaways. Countdown to when the giveaway closes. No confusion about when entries stop. The timer makes it official.
• Segment scheduling. Shows how much time is left in the current segment. Useful if you have a structured show format.
• Co-working streams. Synchronized focus blocks for co-working communities. Everyone works on the same timer and the shared rhythm keeps people accountable.

CleanStopwatch makes this stupid simple. You set it up as an HTML page and add it as a Browser Source in OBS. No plugins. No downloads. No messing with complicated software. It just works.

Step 1: Configure Your Timer

Open the CleanStopwatch Configurator. This is where you dial in the look and feel of your overlay before sending it to OBS.

Choose Your Mode

Three options here:

• Stopwatch counts up from zero. Great for speedruns and tracking how long you have been streaming.
• Countdown counts down from a set time. Perfect for starting soon screens, giveaways, and timed segments.
• Pomodoro cycles between work and break intervals automatically. Ideal for study streams and co-working sessions.

Pick the one that fits what you are doing. You can always change it later.

Style Your Widget

The configurator lets you tweak the visual stuff before you export.

• Accent color is a Pro feature. You get a full hex color picker to match your channel theme exactly. The free tier has 5 preset themes to choose from.
• Background has a transparent toggle. Flip it on and the card background disappears. Only the timer text shows on your stream.
• Border can be thin, rounded, or none.
• Font size adjust it so the numbers are readable at your stream resolution.
• Font pick from system fonts that render cleanly.

The preview updates in real time. You can see exactly what the overlay looks like before you copy anything.

Copy the Embed URL

Once you are happy with the setup, grab the Live Embed URL at the bottom of the Configurator. It looks something like this:

https://cleanstopwatch.com/embed?mode=countdown&duration=300&color=ff0000&transparent=true

That URL packs all your settings into one link. Save it. You will paste it into OBS next.

Step 2: Add to OBS Studio

Now we take that embed URL and drop it into OBS.

1. Open OBS Studio.
2. Pick the scene where you want the timer overlay.
3. In the Sources dock, hit the + button.
4. Choose Browser from the menu.
5. Name your source. Call it something you will recognize, like “Stream Timer” or “Countdown Overlay.”
6. Paste the CleanStopwatch embed URL into the URL field.
7. Set the width and height. Here are rough starting points:
   • Compact: 300 by 100 pixels
   • Full countdown: 400 by 200 pixels
   • Pomodoro showing intervals: 400 by 250 pixels
8. Click OK.

The timer pops up on your canvas right away. You can drag it around and resize it just like any other source. If the numbers look too small, go back and bump up the font size in the Configurator, then refresh the browser source in OBS.

Troubleshooting

If the timer does not show up, here are the usual culprits. Check that the URL in OBS matches the embed URL from the Configurator. Make sure the browser source is not hidden behind another source or outside the visible canvas area. Try refreshing the browser source by right clicking it and selecting Refresh. If the timer shows but has a background when you wanted transparent, double check the transparent toggle in the Configurator and refresh.

Step 3: Position and Fine-Tune

Transparent Overlay

If you set the background to Transparent in the Configurator, you will see only the digits. No box, no background, no border. The numbers float right on top of your game or camera feed. This is the cleanest look and what most streamers go for.

Custom CSS in OBS

If you want more control, you can drop custom CSS into the Browser Source properties. The Configurator handles most styling, but CSS gives you fine-grained control.

A text shadow helps readability over bright footage:

body { text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }

You can also position things inside the browser source boundary if your widget is bigger than the numbers need:

.timer-display { margin-top: 10px; }

Sizing Tips

Your stream resolution determines the widget size you want. Here is a rough guide:

Stream Resolution	Suggested Widget Size	Position
1920x1080	400x200	Top-right or bottom-right
1664x936 (60% canvas)	320x160	Inset corner
Vertical / Mobile	200x100	Top center

Leave some padding from the edge of the screen so the timer is not flush against the border. Ten to twenty pixels looks natural.

Stream Use Cases

Starting Soon Countdown

1. Set a five minute countdown in the Configurator.
2. Make the background transparent.
3. Bump up the font so it is prominent on screen.
4. Add a Starting Soon overlay image behind it in OBS.

The countdown builds anticipation. Viewers see exactly how long until you go live. When it hits zero, transition to your main scene.

Study With Me Pomodoro

1. Set Pomodoro mode with 25/5 minute intervals.
2. Tuck the timer into a corner of your stream.
3. Viewers see exactly how long you have been working and when your next break hits.

Study streams are growing fast. Viewers like the accountability of watching someone else work. The timer makes it structured and clear.

Speedrun Timer

1. Use Stopwatch mode.
2. Put the timer front and center. This is your main tracking tool.
3. For quick runs, use the stopwatch directly without the Configurator.

The lap key (press L) lets you mark split times without stopping the timer. That is useful for tracking individual segments of a run.

Stream Overlay During a Giveaway

1. Set a countdown for the giveaway duration.
2. Display it in the corner of the stream.
3. When it hits zero, call out the winner.

The timer makes giveaways feel more legit. Everyone can see exactly when the clock runs out. No one can claim you ended early or late.

Co-Working Stream

1. Set a 45 minute countdown with 15 minute breaks.
2. Position the timer where everyone in the co-working chat can see it.
3. Start each work block together. Chat during breaks.

Co-working streams build community around shared productivity. The timer is the anchor that keeps everyone synchronized.

Why CleanStopwatch for OBS

• No plugin needed. It works as a standard Browser Source in OBS, Streamlabs, and anything else that supports browser overlays.
• Lightweight. Minimal CPU and GPU usage. It will not tank your game performance or make your stream stutter.
• Transparent support. Full alpha channel for seamless overlays over any content.
• Customizable. Every visual element can be tweaked in the Configurator.
• No signup required. You can configure and embed in under two minutes.

Comparison Table

Feature	CleanStopwatch	Other OBS Timers
Setup time	60 seconds	Often requires registration
Transparent overlay	One toggle in Configurator	Complex CSS or plugin
CPU usage	Minimal	Widely varies
Modes	Stopwatch, Countdown, Pomodoro	Usually just countdown
Custom colors	Full hex picker (Pro)	Limited presets
Plugin required	No (Browser Source)	Often yes

A Note on the Free Tier

The free tier gives you 5 themes and 2 sounds (Default Chime and Classic Beep) with durations up to 120 minutes. That is plenty for most stream setups. There are ads on the free tier, so if you are streaming full screen you might want to keep the overlay small or upgrade to Pro. Pro removes ads, adds 13 themes and 16 sounds, plus the custom hex color picker for perfect brand matching.

Quick Start

1. Open Configurator
2. Select your mode and colors
3. Toggle background to Transparent
4. Copy the embed URL
5. Add as Browser Source in OBS

You will have a working overlay in less than a minute. Pretty good for something that makes your stream look way more professional.

Related Guides

• OBS Timer Overlay Setup Guide — Step-by-step walkthrough for OBS beginners.
• Mastering the Pomodoro Technique for Study Focus — How to structure study sessions with Pomodoro.