How do I add a clock to OBS Studio?

Click the plus in the Sources panel, choose Browser, paste the clock page address into the URL field, and set the width and height for the area it should fill. Position it with the transform handles, then tick Refresh browser when scene becomes active so it reloads cleanly between scenes.

Why is my browser source showing a black box?

The page is painting its own background instead of leaving it transparent. Browser sources composite with an alpha channel and OBS adds custom CSS that clears the page background, so check that CSS is still present and that the clock page is not set to a solid colour theme.

Where should a clock overlay go on screen?

Inside about 90 per cent of the frame, roughly five per cent in from each edge, and usually in a top corner. The bottom of the frame is covered by player controls when a viewer hovers, and mobile apps crop the edges, so anything at the very border risks being hidden.

Will small text stay readable when streaming?

Not reliably. Encoders throw away fine detail first, so use digits at least around 40 pixels tall on a 1080p canvas, in a medium or bold weight, with strong contrast against whatever is behind them. Check a test recording rather than the preview, which shows the overlay uncompressed.

Clock Overlay for Streaming and OBS

Viewers who join a stream halfway through have no idea how long it has been running or what time it is where you are, and both questions get asked in chat constantly. A clock overlay answers them silently in a corner of the frame. It costs nothing, needs no plugin, and takes about a minute to add, because broadcasting software can render a web page directly into a scene.

This guide covers adding the clock as a browser source, getting a genuinely transparent background, where to place it so nothing crops it, and how to keep the digits readable after the encoder has finished with them. The customisable digital clock is the page to point it at.

How Do You Add a Clock Overlay in OBS Studio?

Add a Browser source to the scene, paste the clock's address into the URL field, set the width and height to the size you want the overlay to occupy, and position it with the transform handles. That is the whole process.

Sources panel: click the plus, choose Browser, and give the source a name such as Clock.
URL: enter the clock page address, configured beforehand for format, colour and font.
Width and height: set the canvas the page renders into. Make it a little larger than the digits so nothing is clipped when the hour rolls over to two characters.
Refresh browser when scene becomes active: tick this so the clock reloads cleanly if the source has been shut down.
Shutdown source when not visible: leave this on if the overlay only appears in one scene, and off if you want it running constantly.

Streamlabs, XSplit and vMix all offer the same kind of web source with slightly different names, so the approach transfers. Because it is a real browser, the clock keeps its own settings and updates itself with no interaction from you during the broadcast.

Getting a Transparent Background

Browser sources composite with an alpha channel, so a page with no background colour appears over your scene with nothing behind it. OBS Studio adds a small piece of custom CSS to every new browser source that sets the page background to fully transparent, which is why the field is not empty when you open it.

Leave that CSS in place and the overlay will show only the digits. If the clock page paints its own solid background, the source will appear as an opaque rectangle instead, in which case either choose a transparent theme on the page or crop the source tightly and accept the block. A deliberate semi-opaque backing plate is not always the wrong answer: a dark panel behind light digits guarantees contrast over any gameplay footage, which pure transparency cannot. It costs a little screen space and buys reliable legibility.

Where Should the Clock Overlay Sit on Screen?

Keep the clock overlay inside about 90 per cent of the frame, so roughly five per cent in from every edge. Everything outside that band risks being covered by player controls, chat overlays, mobile crops or a platform's own interface.

Broadcast has used title-safe and action-safe areas for decades for the same reason, and streaming has simply added new ways to lose the edges. The bottom of the frame is the worst place for a clock, because that is where the player's scrub bar and volume controls appear on hover. Top corners are usually safest, with the top right slightly better than the top left on platforms that put a live badge and viewer count at the top left. Also consider your own layout: avoid putting the time where a facecam, an alert box or a game's own HUD already sits, since a clock overlapping a minimap helps nobody.

Will the Clock Stay Readable at Streaming Bitrates?

Only if the digits are big and solid. Video encoders discard fine detail first, so thin strokes, small text and low-contrast colours smear into the background long before large, high-contrast numerals do.

A few settings decide it. Make the digits at least around 40 pixels tall on a 1080p canvas, and more if the stream is watched on phones. Use a medium or bold weight rather than a hairline face, because a one-pixel stroke will not survive compression at 3,000 kilobits per second. Keep the contrast ratio high: the WCAG threshold of 3:1 for large text is a sensible floor for an overlay, and pale digits with a dark outline or shadow will hold up over both bright and dark footage. Ticking seconds cost a small amount of bitrate, since the encoder must refresh that region of every frame, and on a busy scene at a modest bitrate that is bitrate taken away from the gameplay. Hiding seconds is usually the better trade.

Choosing What the Overlay Should Show

Decide what the clock overlay is actually for before choosing a format:

Local time for viewers: use the 12 or 24-hour format your audience reads, and consider adding the time zone name so nobody has to ask.
Coordination across regions: 24-hour time is more compact and never needs an AM or PM suffix eating horizontal space.
Stream duration: a running elapsed timer answers "how long have I missed", which a wall clock does not.
Scheduled segments: a countdown to the next break tells viewers whether to stay, and is more useful than the time of day.

The formats are compared in more detail in 12 hour vs 24 hour display. The shape of the numerals matters too: a seven-segment face suits a retro or synthwave layout, while a plain sans with tabular figures stays still as the minutes change, which is covered in digital clock fonts and the seven-segment display.

Keeping the Overlay Alive Through a Long Stream

Browser sources are ordinary web pages, and long sessions occasionally leave them stale. Ticking the refresh-on-activate option and switching scenes once is usually enough to bring a stuck clock back without restarting anything.

If the overlay runs on a second machine feeding a capture card, that machine also has to stay awake, which means disabling display sleep as described in keeping your display awake. On the same machine as your encoder, keep the browser source out of a minimised window; OBS renders it off-screen itself, so it does not need a visible window of its own. Before going live, watch a short test recording rather than the preview, since the preview shows the clock overlay uncompressed and hides exactly the readability problems you are checking for.

Conclusion

A clock overlay is one of the cheapest additions to a stream: a browser source, a transparent background, a corner inside the safe area, and digits big enough to survive the encoder. Hide seconds unless you need them, keep the contrast high, and test on a recording rather than in the preview window. Configure the display first on the customisable digital clock or the fullscreen clock, then point your browser source at it from digitalclock.now.

Clock Overlay for Streaming: Adding the Time to Your Scene