Skip to the tool

OBS clock overlay

A clock for a livestream. Copy the browser source URL and paste it into OBS.

Customize this clock in Overlay Studio

How to use it

  1. Open Overlay Studio and leave the type on Clock, or start from this page.
  2. Pick a preset. Minimal Broadcast is transparent, so the scene behind the source stays visible.
  3. Set 12-hour or 24-hour time, seconds, the date, and a time zone if the stream should not follow the computer.
  4. Copy the browser source URL. In OBS, add a Browser Source, paste the URL, and set the size to 1920 by 1080.
  5. Leave the browser source custom CSS empty. A transparent clock needs no extra CSS.

Limits to know

  • The overlay follows the clock in the computer running OBS. It does not sync to another device.
  • The overlay page has no site header and does not load analytics.
  • This overlay does not play sound.

Questions

How do I make the OBS clock transparent?

Choose a preset that is already transparent, or turn on Transparent background. In OBS, leave the browser source custom CSS empty so the page background can show through.

What size should the clock browser source be?

Use 1920 by 1080. The type scales with the frame, so the same URL stays readable if you scale the source in the preview.

Related tools