Add Transparent Countdown Timer to OBS Studio

This guide provides a straightforward, step-by-step tutorial on how to add an animated, transparent countdown timer overlay to your OBS Studio broadcasts using an external browser source link. You will learn how to obtain a timer link, configure it within OBS, and customize its appearance to ensure a seamless and professional look for your live streams.

Step 1: Obtain Your Countdown Timer URL

Before opening OBS Studio, you need to generate a countdown timer link from an external website. Popular free services include StreamElements, Streamlabs, or specialized widget creators like vdo.ninja or freeonlinecountdown.com.

  1. Go to your chosen countdown timer generator website.
  2. Customize the timer duration, font, color, and animation settings.
  3. Ensure the background color is set to “transparent” (or green if you plan to use a chroma key, though true transparency is preferred).
  4. Copy the generated widget or browser source URL to your clipboard.

Step 2: Add a Browser Source in OBS Studio

Once you have the link, you can easily integrate it into your OBS scene.

  1. Launch OBS Studio on your computer.
  2. Navigate to the Sources dock at the bottom of the screen.
  3. Click the + (Add) icon at the bottom of the Sources dock.
  4. Select Browser from the drop-down menu.
  5. In the pop-up window, select Create new, name the source (e.g., “Countdown Timer”), and click OK.

Step 3: Configure the Browser Source Settings

The properties window for your new browser source will automatically appear. Adjust the following settings:

  1. URL: Delete the default OBS URL and paste the external countdown timer URL you copied in Step 1.
  2. Width & Height: Set the dimensions to match your widget’s resolution (typically 1920x1080 for a full-screen overlay, or smaller dimensions like 800x600 if the timer is meant to be a small corner element).
  3. Custom CSS: Leave this default unless you need to override the widget’s styles. The default code body { background-color: rgba(0, 0, 0, 0); margin: 0px; overflow: hidden; } automatically ensures the background remains transparent.
  4. Control Audio via OBS (Optional): Check this box if your countdown timer has ticking sounds or alarm audio that you want to control directly through the OBS audio mixer.
  5. Visibility Behavior: Check the boxes for “Shutdown source when not visible” and “Refresh browser when scene becomes active”. This ensures the countdown timer resets and starts fresh every time you switch to this scene.
  6. Click OK to save the changes.

Step 4: Position and Scale the Timer

Your animated countdown timer will now appear on your OBS canvas with a transparent background.

  1. Click on the countdown timer source in your canvas or sources list.
  2. Grab the red bounding box corners to scale the timer up or down.
  3. Click and drag the timer to place it anywhere on your screen.
  4. To crop any unwanted edges, hold down the Alt key (Windows) or Option key (Mac) while dragging the sides of the bounding box.