Broadcast & OBS

How to Add a Transparent Countdown Timer in OBS Studio (Without Green Screen)

Skip messy green-screen chroma keying. Here is how to configure a crisp, 60fps transparent countdown clock overlay directly into OBS Studio via browser source.

1. Why Green-Screen Chroma Keying Fails for Timers

For years, streamers and AV crews used a high-contrast green (#00FF00) background behind timers and filtered it out using OBS Chroma Key. While that works in a pinch, it causes two critical visual issues on stream:

  • Fuzzy font borders: Font anti-aliasing blends edge pixels with green. When keyed out, you get a nasty green halo or semi-transparent eaten-away numbers.
  • Color distortion: If your timer shifts to green (normal) or yellow (wrap-up warning), the chroma key filter accidentally cuts into the timer text itself.

The clean modern standard is true CSS alpha transparency over a browser source. The background has an opacity of zero (rgba(0,0,0,0)), allowing your numbers, progress bar, and speaker cues to float cleanly over camera feeds or motion graphics.

TIP: Show Caller Tip
If your switcher computer is under heavy GPU load during 4K streaming, tick "Shutdown source when not visible" in OBS Browser properties so inactive scenes consume zero graphics rendering overhead.

2. Generate Your Live Overlay Link

Unlike monolithic desktop apps that require NDI plugins or virtual audio cables, Stage Countdown runs directly through high-speed WebSockets. Every room has dedicated URL faces for controllers, speakers, and video switchers.

1. Start a Stage Countdown room (no login required for quick setups).
2. Open the Share modal from the top right of your controller console.
3. Under the Outputs tab, locate the OBS Overlay view.
4. Copy the generated link. It will look like: https://stagecountdown.app/r/your-room-id/overlay

This dedicated view strips away all stage borders, control buttons, and backdrops, leaving strictly the clock digits, phase cues, and alert ribbons.

3. Add and Configure the OBS Browser Source

Now switch to OBS Studio (v28 or newer recommended, which uses Chromium Embedded Framework with hardware acceleration enabled by default):

1. In OBS Studio, navigate to the Sources panel in your target scene.
2. Click the + button and choose Browser.
3. Name it something clear like GFX - Stage Timer and press OK.
4. In the Properties dialog, paste your Stage Countdown Overlay URL into the URL field.
5. Set Width to 1920 and Height to 1080 (matching your canvas resolution).
6. Under Custom CSS, ensure the default background is cleared:

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

4. Positioning, Corner Anchors & Padding

Because the overlay renders at 1920x1080, by default it anchors according to your room layout settings:

  • Top-Right Corner: Ideal for esports matches, webinars, or product demos where the speaker camera occupies bottom corners.
  • Lower-Third Bar: Best for broadcast keynotes. Sits neatly above the speaker's name chyron.
  • Full-Screen Intermission: Displays an ultra-clean countdown with agenda title during conference coffee breaks.

If you need to crop or reposition quickly inside OBS, hold the Alt key (Option on Mac) and drag the bounding box handles to trim any unwanted empty margins.

WARNING: Avoid Blending Mode "Additive" If Text is Dark
Some online guides recommend setting OBS Blend Mode to "Additive" to remove black backgrounds. Never do this if you have colored text! Additive blending makes yellow warning text washed-out and semi-transparent against bright camera backgrounds. Native alpha channel requires no blend mode changes.

5. Controlling the Timer with Stream Deck or Mobile

The beauty of this setup is decoupling display from control. While OBS runs silently on your broadcast machine, the show caller or timekeeper does not need access to the video switcher:

  • Phone / iPad: Open the Controller URL on any mobile browser. Tap Start, Pause, or add +2 minutes with zero friction.
  • Bitfocus Companion & Stream Deck: Use Stage Countdown's local HTTP API endpoints or keyboard shortcuts to map Start/Stop/Next to physical tactile buttons at FOH (Front of House).
  • Silent Flash Prompts: Type a discrete message on the controller (e.g. "WRAP UP NOW" or "STRETCH 3 MIN") and it will flash seamlessly on the stage confidence monitor without appearing on your OBS broadcast feed unless you explicitly choose to mirror it.

6. Common OBS Browser Source Gotchas

Here are the three most frequent real-world issues AV engineers run into on event day, and how to fix them in 10 seconds:

Issue: Timer stops ticking when switching to another OBS scene
Uncheck "Unload read-only source when inactive" in the Browser Source properties. Otherwise, OBS suspends the WebSocket connection until you cut back to that scene.

Issue: Canvas appears blurry on 4K multi-view displays
Ensure your browser source dimensions are set to 3840x2160 rather than scaling up a 1080p source inside the preview window.

Issue: Hotel/Venue firewall blocks WebSockets
Stage Countdown runs WebSockets over standard SSL port 443 (WSS), bypassing 99% of restrictive corporate proxy filters that typically trip up raw TCP protocols like OSC.