Stream Clock: The Ultimate Free Overlay for OBS

Whether you are streaming on Twitch, YouTube Live, or Kick, having a clear time display is essential for keeping your audience engaged. "Stream Clock" is a free, web-based tool designed to create stylish clocks and timers that you can add directly to OBS Studio as a Browser Source.

No installation is required. Just copy the URL, paste it into OBS, and customize the look to match your brand.

1. Classic and Motion Graphic Themes

Start with four classic themes, or choose one of five illustrated skins from the Others menu:

• ⚡ Cyber Neon: A glowing, futuristic design perfect for FPS games, tech streams, and night vibes.
• 🦄 Pastel Kawaii: Soft colors, rounded fonts, and stitch effects. Ideal for VTubers, cozy streams, and Just Chatting.
• 👾 Pixel Retro: 8-bit style with a dot-matrix font. The best choice for retro gaming, speedruns, and indie games.
• 🎞 Flip Clock: A classic mechanical flip animation. Adds a sophisticated, analog feel to study streams or countdowns.

15 Animated Motion Graphic Clocks

These Three.js themes include rings, neon signs, hanging tags, and widgets with the date and day of the week. Rev Gauge and Triple Gauge are inspired by vehicle dashboards.

• 💻 Glitch Decode: Digits scramble into place with occasional glitches. A cyber look for FPS and tech streams.
• 🏷 Cozy Tags: Hanging tags sway and flip as the time changes. Move your mouse over the clock to send a breeze through nearby tags.
• 💧 Aqua Fill: Outlined digits fill with water over one minute, with gentle waves and rising bubbles. A relaxing look for study and sleep streams.
• 🪪 Slide Card: Digits slide upward inside a clean white card. A minimal look for Just Chatting and study streams.
• 💡 Neon Sign: A neon frame lights up over one minute, while the digits flicker on when the minute changes.
• 🎮 Slash Bar: A two-tone angled bar with diagonal digit transitions and a sweep of light at each new minute.
• 📟 LED Matrix: A dot-matrix display that updates from top to bottom, with a brief flash as each dot lights up.
• 🌙 Moonlit: The current moon phase and twinkling stars, with softly fading digits and a shooting star at each new minute.
• 🍬 Jelly Pop: Bouncy sticker-style digits and heart-shaped colons. A playful look for VTuber streams.
• ☁️ Puff Cloud: A fluffy cloud plate with a gentle breathing animation for morning and casual streams.
• 🎧 Beat Bars: Animated waveform-style bars with a playhead that moves across the display over one minute.
• 🪐 Orbit Rings: Three HUD-style rings show the progress of hours, minutes, and seconds.
• 🌇 Synth Horizon: A moving grid and sunset bring a synthwave look to retro gaming and music streams.
• 🏎 Rev Gauge: A six-speed tachometer with a synchronized gear indicator and shift knob. Each mark represents 10 seconds; the needle revs past the next mark before shifting, then lands on that mark at each 10-second boundary. The red zone starts at 5 (50 seconds), and the gauge returns to first gear after reaching 6 at the end of the minute.
• 🎛 Triple Gauge: Three gauges show hours, minutes, and seconds, with a digital readout below each needle.

Default motion theme colors avoid greens and cyans to work with green-screen chroma keying. Turn on Reduce Clock Motion for gentler animation. This preference is saved separately for each theme; Orbit Rings starts with it enabled.

2. Three Modes for Every Situation

Choose the mode you need, then copy its dedicated OBS URL:

• Current Time: Displays your local time. Great for 24/7 streams or keeping viewers grounded.
• Count Up (Endurance): Tracks how long you've been streaming. Perfect for "Endurance Streams", "Subathons", or "Until I Win" challenges. Supports milliseconds for precision.
• Countdown: A timer that counts down to a specific event, like a stream start or a New Year's countdown. When it hits zero, a confetti animation plays automatically!

3. How to Add to OBS Studio

1. Set your mode, theme, colors, and labels on this page.
2. Open the OBS URL tab and copy the dedicated overlay URL.
3. In OBS, click the "+" in Sources, select Browser, and paste the URL.
4. Use the recommended width and height shown in the OBS URL tab.

The dedicated URL shows only the clock and your chosen background. Enable Transparent Background for a transparent overlay. Auto-start Timer starts a countdown or count-up when OBS loads the page. To change the design, update your settings here and paste the new URL into OBS.

You can also use this page's regular URL and adjust settings through OBS's Interact window. For that workflow, start with Width: 1200 and Height: 800, then crop the clock as described below.

4. Pro Tip: Hiding the Control Panel

You only want the clock to show on stream, not the settings buttons. To hide the control panel:

Hold the Alt key (Option key on Mac) and drag the edges of the source box in the preview window. This crops the image, allowing you to display only the clock widget.

5. Transparency & Chroma Key

Stream Clock is designed for transparency.

• Transparent Background: Enable "Transparent Background" in the OBS URL tab for native transparency. Alternatively, set "Stage Background" to Green (Key) and use the Chroma Key filter in OBS to remove the background entirely.
• Semi-Transparent Clock: You can also adjust the opacity of the clock's inner background using the "BG Opacity" slider on classic themes, allowing your gameplay to show through the timer itself.

Summary

Small details make a stream look professional. With "Stream Clock," you can add a high-quality, animated timer to your layout in seconds—for free, and with no software to install.
Customize your clock now and upgrade your stream's production value!