How to Add a Countdown Timer to OBS & Twitch (Browser Source)

A countdown is one of the simplest ways to make a stream feel more professional. Instead of a blank screen or a static image, viewers see a live timer ticking down, and they know exactly how long to wait before something happens.

Video tutorial

Prefer to watch it done? This walkthrough covers the whole flow - building the timer in Rija, copying the hosted URL, adding it to OBS as a Browser Source, and making the background transparent. The written steps below follow the same order, so you can use either.

Why streamers use a countdown timer

Most streamers reach for a countdown in a handful of recurring moments:

• Starting soon - a "starting soon" countdown on your pre-stream scene tells viewers the show begins in, say, five minutes, so they stick around instead of leaving.
• Be right back - when you step away, a short timer reassures chat you haven't disappeared.
• Intermission - between games, segments or matches, a countdown fills the gap cleanly.
• Sub-goal or fundraiser deadlines - count down to the end of a challenge or a donation push.
• Event & drop countdowns - a release, a collab, or a scheduled reveal that you want everyone watching for.

Build the timer in Rija

Head to app.rija.io and create a new timer. Set your end date, time and timezone - for a "starting soon" screen, that is simply the moment your stream begins.

Then style it so it matches your channel. You get 1000+ Google Fonts, custom digit and label colours, and background options including solid colours and gradients. Pick digit animations like flip, slide, fade or pulse if you want the numbers to feel alive. Keep the styling readable at a distance - on stream, big clear digits beat fancy ones.

Set the size to match your canvas

Rija lets you set a custom pixel size (width x height) for free. If your canvas is 1920x1080, you don't need the timer that large - build it at the size you actually want it to occupy, for example 600x200 for a corner timer, or larger for a full "starting soon" screen. Matching the size now saves you fiddling with scaling in OBS later.

Add it to OBS or Streamlabs as a Browser Source

Once your timer looks right, publish it. Rija gives you two things: an embed snippet for websites, and a hosted timer URL you can open directly in any browser. For streaming, the hosted URL is the one you want.

Copy the hosted timer URL from the publish screen. Then, in OBS Studio or Streamlabs:

1. Select the scene where you want the countdown (your "starting soon" scene, for example).
2. Add a new source and choose Browser (Browser Source).
3. Paste the hosted URL into the URL field.
4. Set the width and height to match the pixel size you built in Rija.
5. Click OK, then drag and position the source in your scene.

The countdown now renders as a live layer in your stream, ticking in real time. Streamlabs works the same way - its Browser Source uses the same URL field.

Make the background transparent Updated

This used to require a chroma key. It doesn't anymore. The OBS Browser Source has a Custom CSS field, and one rule is enough to strip the timer's background panel out so only the digits and labels sit over your overlay.

In the Browser Source properties, scroll to Custom CSS and add:

#rija\.io-main-container {
    background: transparent !important;
}

The backslash before the dot matters - the container's ID contains a literal full stop, so it has to be escaped for CSS to match it. Paste the rule exactly as above.

OBS ships with a default snippet in that field (body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }). Leave it in place and add the Rija rule underneath it, then click OK. The panel behind the numbers disappears and your scene shows through.

If your software has no Custom CSS field

Some browser sources don't expose custom CSS. In that case the two older approaches still work:

• Match the scene colour. Set the timer's solid background to the same colour as the area of your scene it sits on. The seams disappear and it looks integrated.
• Use a colour key. Set the timer background to a solid colour you don't use elsewhere (a bright green, for instance), then add a Chroma Key or Colour Key filter to the Browser Source to knock that colour out.

If you want the countdown to be part of a wider on-page layout instead of a stream layer, the same publish flow is covered in our guide on how to add a countdown timer to a website.

Reusing it across scenes

Because it's just a URL, you can add the same Browser Source to more than one scene - or use OBS's "Add Existing" option to reference the same source. One timer can run across your "starting soon", "be right back" and intermission scenes, all counting to the same moment.

Free vs Pro for streamers

You can run a stream countdown timer free: unlimited timers, unlimited views, gradients and custom pixel sizing are all on the free plan, which carries a small Rija watermark. Pro ($7/month or $59/year) removes the watermark and adds image/video background upload, logo upload, CTA buttons and analytics. For a clean, unbranded overlay, Pro is worth it; for testing the workflow or a casual stream, free is enough to get a proper obs countdown running today.