How do I add a clock to OBS?

Add a Browser source to your scene and set its URL to a clock page. Set the source width and height to the area the clock will occupy rather than the full canvas, then position and lock the layer. Leave the shutdown-when-not-visible option switched off.

Will a clock overlay use extra bandwidth?

Only slightly, and only because moving digits give the encoder something to describe. Seconds cost almost nothing; milliseconds churn constantly and take bitrate away from the rest of the picture. Placing the clock on a solid backing panel reduces the encoding cost further.

Does a clock overlay need a transparent background?

It is the cleanest option. Browser sources are rendered with an alpha channel, so a page with a transparent background composites over video without keying artefacts. Chroma key is only necessary when the clock has to pass through hardware or a feed that carries no transparency.

Is the time on my stream overlay the viewer's time or mine?

It is the time on the machine running the encoder, which is yours. Viewers in other time zones will see your local time, so state the zone on screen if the clock is being used to announce a schedule rather than simply to show that the broadcast is live.

Live Clock For Streaming Overlays

Viewers ask what time it is more often than streamers expect. On a long broadcast, a countdown to the start, a scheduled segment or a charity target, the question comes up in chat again and again until something on screen answers it. A live clock for streaming solves that permanently, and it costs nothing but a browser source and a few minutes of layout work.

This article covers adding the clock in OBS Studio, sizing and placing it so it survives compression, choosing colours that hold up against moving video, and keeping the motion of a streaming overlay calm enough that nobody watches the clock instead of the stream. The fullscreen display mode is the page to point a browser source at, since it strips away every browser control.

Why Put A Live Clock For Streaming On Screen?

Because a visible live clock answers a repeated question without anyone speaking. It anchors the broadcast in real time, proves a stream is live rather than a rerun, and gives a shared reference for anything scheduled, which matters most to an audience spread across time zones.

There is a second, quieter benefit. Recordings and VODs keep the clock, so a burned-in time becomes a rough index for anyone scrubbing back through hours of footage looking for a particular moment. Producers running multi-camera setups use the same trick to line up sources afterwards. For that job the streaming clock needs seconds, and often needs them large.

How Do You Add A Live Clock For Streaming In OBS Studio?

Add a Browser source to the scene and point it at the clock page. In OBS Studio, click the plus under Sources, choose Browser, give it a name, paste the URL, then set the width and height to match the area you want the clock to occupy.

A few settings in that dialog matter more than the rest:

Width and height: set these to the region the clock will fill, not to the whole canvas. A 1920 by 1080 browser source scaled down to a corner wastes rendering work and softens the digits.
Custom CSS: the field is there to override background colour and sizing. Setting the page background to transparent is what lets the video show through behind the digits.
Shut down source when not visible: leave this off for a clock. A source that restarts every scene change will flash as it reloads.
Refresh browser when scene becomes active: also unnecessary here, since a live clock derives the time from the machine on every frame and never goes stale.

Once the browser source exists, treat your live clock like any other layer: drag it into position, lock it so it cannot be nudged, and add it to every scene that needs it rather than duplicating it per scene.

Sizing And Placement Over Video

Put the live clock in a corner and keep it clear of the safe-area edges. Broadcast layouts crop and letterbox in ways you cannot predict, and a clock that sits flush against the frame edge is the first thing to be clipped on a mobile player or an embedded viewer.

Sizing a clock overlay is a judgement about viewing distance rather than about pixels. A large share of viewers watch on a phone, where the whole frame is a few inches wide, so a clock that looks generous on a 27-inch editing monitor can be unreadable in a pocket. As a working rule, if the digits are smaller than the chat font on your own preview, they are too small. Avoid the exact centre and the lower third, which is where captions, alerts and name plates land.

Contrast, Bitrate And Readability

Thin, low-contrast digits are destroyed by video compression, and a live clock is nothing but fine detail. Encoders spend their bits on large areas of motion and starve fine detail, so hairline digits over a busy scene turn into a smear long before the rest of the picture visibly degrades.

The fixes are all about separation between the digits and whatever moves behind them:

Use a heavier weight: a bold or medium face survives compression where a light one does not.
Add a backing plate: a semi-transparent dark panel behind the clock gives a stable background so the encoder is not re-describing the area every frame.
Avoid pure white on pure black: extreme contrast can ring and bloom at low bitrates. Slightly off-white on a dark grey panel reads more cleanly.
Test at your real bitrate: a local preview always looks better than the encoded output, so judge legibility from a recording or a test stream, never from the preview window.

Chroma Key And Transparent Backgrounds

Prefer a genuinely transparent browser source to a chroma key when compositing a clock for streaming. OBS Studio renders browser sources with an alpha channel, so a page with a transparent background composites cleanly with no keying artefacts at the edges of the digits.

Chroma key remains useful when the live clock has to come in over a video feed from another machine, or through hardware that carries no alpha channel. If you must key, use a saturated green or blue that appears nowhere in the digits, keep the key colour flat, and expect some edge fringing on fine strokes. Every keying artefact lands on the outline of the numbers, which is exactly where readability is decided, so the transparent route is worth the extra setup whenever it is available.

Avoiding Distracting Motion

Hide milliseconds unless the stream is about timing. Digits that churn thirty or sixty times a second pull the eye continuously, and they also give the encoder a constantly changing region to describe, which spends bitrate that the rest of the picture needs.

Seconds are usually the right level of detail for a live clock for streaming: enough to prove the stream is running, not enough to hypnotise. If a segment genuinely needs finer resolution, such as a speedrun or a timed challenge, bring in a stopwatch with laps or a live countdown timer as a separate source and remove it when the segment ends. Fade transitions on the clock layer are another quiet trap; they make the digits shimmer during scene changes. Leave it static. The related question of putting the same display on a monitor beside you is covered in running a clock on a second monitor.

A Reliable Live Clock For Streaming Checklist

Run through this before a long broadcast rather than during one.

Check the machine's time first: a live clock shows the streaming PC's own system clock, so an unsynchronised machine broadcasts the wrong time very convincingly.
Lock the source: a locked layer cannot be dragged out of place mid-stream.
Record a test: watch thirty seconds back at your real bitrate on a phone-sized window.
Check every scene: the clock disappearing on the starting-soon screen is the most common oversight.
Leave it running: a browser source that stays loaded through a six-hour stream will not drift, because the time is re-read from the operating system on every repaint.

The one thing worth checking beyond the layout is the accuracy of the clock itself, which is a property of the machine and not the page; see browser clock accuracy. If the display also needs to stay awake unattended, screen wake lock and battery covers the trade-offs.

Conclusion

A live clock for streaming is a browser source, a corner, and a few decisions about contrast. Point OBS Studio at a clean fullscreen clock page, size the source to the region it occupies rather than the whole canvas, keep the digits heavy and well separated from the video behind them, and hide milliseconds unless timing is the point. Test at your real bitrate on a small screen, because that is where legibility fails first. Set up your live clock for streaming with the fullscreen display mode, or browse the other displays on livetime.now.

How To Add A Live Clock For Streaming Overlays