OBS countdown timer and clock overlay

Count down to at , , .

clooock.com

Press Esc to leave full screen

How it works

  1. Make the overlay

    Countdown, timer or clock, with white, no background for a transparent overlay.

  2. Copy the link

    Tap Link for Notion: the plain address is what OBS needs.

  3. Add a Browser source

    In OBS, Sources, +, Browser. Paste the link in URL, set the size, OK.

Any suggestions for improvement?

We build tools that are as simple and intuitive as possible, with a few bonuses here and there. Tell us what would make this one better.

Step by step in OBS Studio

  1. Make the widget above. For an overlay on top of your video, choose white, no background.
  2. Tap Link for Notion to copy the address.
  3. In OBS, in the Sources panel, click + and choose Browser.
  4. Paste the address in the URL field and set the width and height, for example 800 by 300 for a countdown.
  5. Click OK, then move and resize the source in the scene.

OBS fills its Custom CSS field with a rule that makes the page background transparent. Keep it: with “no background” chosen in the sentence, only the digits show over your video.

Starting soon screen

A countdown set to your own time zone and to the start time of the stream makes a simple “starting soon” scene: put it over a background image, with the title “Live in” and a message at zero such as “Here we go!”. The countdown ends at the planned time even if you open the scene early.

Timers on stream

For a timer that starts the moment the scene appears, choose starts on its own, and tick Refresh browser when scene becomes active in the source properties: each time you switch to the scene, the timer starts again from the full duration. To hear the sound in the stream, enable Control audio via OBS in the same properties.

OverlaySize in OBS
Countdown with title800 × 300
Clock in a corner400 × 160
Timer600 × 300

Questions

The background is not transparent. Why?

Choose white, no background (or black) in the sentence and copy the link again. Also check that the Custom CSS field of the Browser source still contains the default rule.

Can I use my own font?

The widget uses Anton for the digits. You can change colors in the address (c= and f=), but not the font.

Does the timer restart when I switch scenes?

Only if you tick Refresh browser when scene becomes active. Otherwise it keeps its state while OBS is open.

More free tools

Alarm clockWake up to the sound you like.Full screen clockFour styles, with or without seconds.World clockThe time in every city, with the gap from yours.Time zone converterConvert a time between cities, with the day.Daylight saving timeWhen the clocks change next, wherever you are.TimerCountdowns with sound and presets.StopwatchLaps to the hundredth.Pomodoro25 minutes of focus, then a break.All toolsAll time tools