Countdown Timer Configurator

Design a countdown, watch it update live, then copy the link. No accounts or API keys needed.

When

The date and time above are read in this timezone, so viewers anywhere count down to the same moment.

Text
Format

Hidden units roll into the next one shown, e.g. without days you get 50:00:00.

Style

Any font from fonts.google.com works under "Custom". System fonts also work offline.

Effects

Live demo

Everything you change appears here immediately. Press "Test: 10 s" to watch the ending.

Your timer link

Open

How to use it

  1. Pick the date, time and timezone of the moment you are counting down to.
  2. Set the text, format, style and effects. The live demo updates as you go.
  3. Press Copy link or Open. The link holds all your settings, so you can bookmark it, share it, or come back to it later.

In OBS or Streamlabs

  1. Tick Transparent under Style if you want only the text over your scene.
  2. Add a Browser source and paste the timer link into its URL field. Use the URL field rather than the "Local file" checkbox so the settings in the link are kept.
  3. Set the source width and height (for example 1920 × 1080). The timer scales to fit, and the Size slider sets how much of the width it fills.

On a website

Paste the embed code into your page's HTML. Change width and height to fit your layout.

Hosting

  • Keep index.html and timer.html in the same folder. Any static host works, for example GitHub Pages.
  • Fonts load straight from Google Fonts with no API key, so they need an internet connection. The fonts in the "System" group work offline.
  • The timer uses the viewer's device clock, so a wrong system clock gives a wrong countdown.

Link settings

You can also edit the link by hand. Every setting is optional; missing ones use the defaults.

SettingValuesDefault
targetThe end moment as an ISO date, e.g. 2027-01-01T05:00:00.000Znone
timezoneAn IANA timezone, used for the date line, e.g. America/New_Yorkviewer's timezone
title, endTextAny textempty, TIME'S UP!
formatcolon, labels, blocks, wordscolon
unitsAny of d h m s, e.g. hmsdhms
fontA Google Font or system font nameSpace Mono
size2 to 40 (timer height as a share of the width)12
fontColor, titleColorHex color, e.g. #FFA500#FFA500, same as timer
bgHex color or transparent#1e1e1e
pad, hideZero, overtime, blink, showDatetrue or falsepad on, others off
shineEffect, glitchEffect, glow, pulsetrue or falseoff