Stream Countdown

Mar 21, 2020 · 3 mins read
Stream Countdown
Share this

Have you ever sat on a streamer’s starting soon screen for what seemed like forever? Viewers will appreciate you letting them know how long a starting soon or be right back screen is going to last. This can even prevent them from leaving for another stream.

I (TheRealDarthGuy) created a stream countdown that you can use as an OBS or Streamlabs OBS browser source that will display a custom duration countdown timer. It’s simple to setup and use by following the tutorial video (below)!

I use it for my starting screen countdown so that my viewers know how long they will have to wait for the show to begin. However, you can use it for many other things as well! Some ideas?

  • Starting Soon Screen countdown
  • Be Right Back Screen countdown/limit
  • Stream challenge timer (How fast can you solve a Rubicks Cube?)

You get the idea… enjoy and let me know if you use it!

Customize your Stream Countdown

You can configure your stream timer by entering desired settings below! Any field left blank will use default values.

Numbers ONLY for pixel sizes. Other values can break font sizes.
Use Google Color Picker to select a color and paste in either HEX value into this box.
Defaults to "transparent"but will show up as white in browser but transparent in OBS. Use Google Color Picker to select a color and paste in either HEX value into this box.

Further enhancements:

Custom Font

You can customize the font by adding custom CSS to the browser source. There are two requirements:

  1. You MUST have the font installed on your system.
  2. You MUST include the below snippet in the Custom CSS section within the browser source’s configuration window AND replace the {Your Font Name Here} with the name of the system font you’d like to use.
    • E.g. To use a font named “Good Times” the line will be:
        #countdown { font-family: "Good Times" !important; }

Note: This is covered at the end of the tutorial video.

#countdown { font-family: "{Your Font Name Here}" !important; }


  • Minutes or seconds CAN be set to zero
  • Make sure you turn on (check) the browser source’s configuration window options:
    1. Shutdown source when not visible
    2. Refresh browser when scene becomes active
  • Ensure that your width setting for the browser source can support your ending text
    • Smaller sizes will cause the text to wrap too a new line
      • This may be desired to create multiple lines
  • Ensure that your height setting for the browser source can support your ending text
    • Small sizes with wrapping text will not show the text that is outside the available space

Written by Chris •        

I enjoy helping others with tech problems and am enthusiastically trying to be one of the "nice guys" of the inter-webs!

I host streams featuring just chatting and gameplay plus produce videos that give ideas on how to improve your content and interaction with your audience. I have a few nifty tools that I've made free for all who need them and post those at

Who am I offline? I'm a father, husband, paintballer, disc golfer, and software engineer! I love sunny weather (who doesn't), movies, and cycling. My friends are family and I love helping others in any way I can!