By simply displaying a clock on your streaming screen, you can convey a real-time feel to your viewers and enhance the overall screen balance. However, some might postpone this task because they are unsure how to add a clock in OBS.

This article explains how to display a clock for free on OBS and introduces handy sites where you can access recommended templates and custom materials.

Those who want to make their streaming screen more appealing should definitely give this a try.

Additionally, a video tutorial is available at the end of the article for those who prefer visual guidance.

3 Benefits of Displaying a Clock on OBS

Displaying a clock on your streaming screen tightens up the entire design, giving it a more professional touch. Moreover, by being mindful of the time lag between the streamer and the viewers, the streaming experience becomes smoother.

First, let’s check out the benefits of displaying a clock in OBS.

• Convey a real-time feel to viewers
• Balance the streaming screen beautifully
• Bridge the time lag with viewers

Convey a Real-Time Feel to Viewers

By simply displaying a clock in OBS, you can add a real-time, live feel to your stream. Just as time is shown during live television broadcasts, having a clock on the screen can significantly enhance the immediacy of your stream.

For morning active streams or streams covering timely topics, a clock will intuitively help viewers perceive the real-time nature of the stream.

Furthermore, it’s convenient for viewers who are multitasking while watching the stream. They can check the time without switching screens, helping to prevent viewer drop-off.

Enhance the Balance of Your Streaming Screen

Adding a clock to your streaming screen can greatly improve the overall design balance.

For chat streams or scenes with little movement, the screen can easily appear monotonous. Displaying tools like a clock can add a moderate accent to the screen.

Clocks introduce movement into the screen, offering a change to still images or fixed backgrounds, capturing viewers’ attention, and adding dynamics to the screen.

If you play around with the arrangement, your streaming screen can look substantially more professional. Using a clock does not only fill gaps on the screen but also conveys the streamer’s good taste to the viewers.

Bridge the Time Lag with Viewers

Displaying a clock in OBS allows you to grasp the time lag with viewers more easily.

It’s also useful in the following situations:

• TikTok simultaneous viewing events: Streamers and viewers can enjoy video and audio at the same timing
• YouTube replay viewing: Viewers can accurately check the timing of actions
• Alternative to copyrighted video: Video clippers can easily track progress based on the clock

Basic Steps to Display a Clock in OBS

To display a clock in OBS, no special plugins or complicated operations are needed.

I will touch on template display methods later, so let’s first look at the basic settings in OBS.

1. Click the “+” button in “Sources”

2. Select “Browser”

3. Name it something easy to understand like “Streaming Clock” or “Time Display” and click “OK”

Next, there are two methods available:

• Method of displaying a clock by copying and pasting a URL
• Method of displaying a clock using a local file

Whether the clock template is a “URL format” or a “local file” varies depending on the distribution site.

When you find a clock of your liking, be sure to check the format.

Top 3 Recommended Clock Templates for OBS

We’ve selected clock templates for those who want to make their streams more fun and stylish. There are a wide range of designs, from animated designs to simple and practical styles, and even a bit unusual and unique designs.

Find the one that suits your streaming style as I explain the features and usage of each template.

Template Name	Provider Site	Format
Neon Flip Clock	BOOTH	zip file
Digital Clock	mc-stock	URL
Analog Clock	BOOTH	zip file

Fun Movement! Neon Flip Clock

“Neon Flip Clock” features an animation where numbers flip over, adding a unique touch.

Although it features a simple black and white design, the movement adds an accent to your streaming screen.

We’ve summarized the steps from downloading to OBS settings so you can proceed with ease. Let’s set it up referencing the summary below.

1. Prepare a Pixiv Account
　A Pixiv account is required for Neon Flip Clock. If you don’t have an account, create one here.

2. Access the Download Link
　After logging into Pixiv, go to the Neon Flip Clock page. Click “Free Download” to obtain the file.

3. Extract the File
　Since the downloaded file (pata_clock_v1.zip) is compressed, use an extraction tool to unzip it. The HTML file in the folder after extraction is the setup data.

Refer to the following for setting it up in OBS.

1. Launch OBS, click “+” in “Sources,” and select “Browser”

2. Set an easy-to-understand name like “Neon Flip Clock”

3. Check “Use local file” and select the extracted HTML file to reference

4. Adjust the size and position and place it wherever you like on the screen

This design is recommended for those who want to add some movement to their screens. By setting the clock, your entire streaming impression will look more polished.

How to Change the Colors of the Neon Flip Clock

The default colors of the Neon Flip Clock are black and white, but you can change the colors using a “color change tool” provided by the distributor.

The color change tool is available here. Start by accessing it.

After adjusting all four sections, click “Copy Customization Code.” Obtain the generated custom CSS code and edit the HTML file in the order below.

1. Edit HTML File
　Open the index.html file in the downloaded Neon Flip Clock folder with a text editor (e.g., Notepad or VS Code).

2. Add CSS Code
　Inside the file, there will be a note stating “up to here for custom settings”. Paste the copied CSS code right below it.

3. Save Edited Content
　Save the file to reflect the changes.

Next, open OBS and upload the HTML file following these steps:

1. In OBS, open the “Browser” source and upload the edited HTML file

2. Return to the streaming screen and confirm the color changes

By customizing the colors, you can create a clock design perfect for your streaming atmosphere.

Using warm colors conveys a warm impression, while cool blues offer a calm atmosphere. Adjust the colors to aim for a design that catches viewers’ eyes with impact.

For Minimalists! Simple Digital Clock

If you wish to display the time without unnecessary embellishments or prioritize practicality, “Digital Clock” showing only date and time is a must-try.

This template features a simple design with excellent visibility, allowing you to show the streaming screen cleanly without clutter.

Here’s how to introduce it:

1. Access the site and copy the template URL

2. In OBS, add “Browser” as a “Source” and paste the URL in the URL field

3. Adjust the size and position, then place it on the streaming screen

Since you only need to paste the URL to use it, it’s worth a try for those who don’t want to spend time on clock settings.

Make Your Screen Stand Out! Stylish Analog Clock

An analog clock adds a gentle and warm touch to your screen with its moving hands and rounded shape.

It can be introduced using the same steps as the Neon Flip Clock.

1. Download and Extract
　Download the clock’s HTML file from the distribution site and unzip it.

2. Add to OBS
　Click the “+” button in the “Sources” section of OBS, and select “Browser”.

3. Check “Use local file” and specify the unzipped HTML file

4. Adjust Size and Position
　Drag to adjust the position within the screen and change the size as needed, then complete.

4 Convenient Sites to Get Custom Clock Materials for OBS

For those who want to make their streaming screens more stylish or add functional clocks, here are four handpicked convenient sites.

Each site offers templates rich in design.

I’ll explain the steps from URL copy to setup, so find the site that suits you best.

Site Name	Official Site	Membership Required
Neon Digital Clock	Official Site	Not Required
OBS-clock	Official Site	Not Required
Sucolab	Official Site	Required
BOOTH	Official Site	Required

Neon Digital Clock

Neon Digital Clock is a distribution site offering digital clocks with a stylish neon glow. For those looking to add a sophisticated touch to their streaming screen, this is highly recommended.

The setup is simple and can be easily installed using browser sources.

1. Access the official site of Neon Digital Clock

2. Customize the Clock Design
　When the page opens, make the following settings. Proceed while checking the screen preview:
　2-1. Font Size: Adjust font size (recommended size 50-100)
　2-2. Color: Choose your preferred color
　2-3. Type: Select the information to display (date, time, etc.)
　2-4. Design: Choose design like frame or two-level layout

3. Copy the “Viewer URL”
　Once settings are complete, right-click on the displayed “Viewer URL” and select “Copy Link Address”. This URL is what you will use in OBS.

Next, open OBS and follow these steps to introduce the neon clock:

1. Select “Browser” from “Sources”

2. Paste the copied Viewer URL into the “URL” field

3. Adjust the size and position to align with the screen design

OBS-clock

OBS-clock is a distribution site equipped with a timer function as well as clocks. With 25 types of templates to choose from, you can change the design to match your mood for the day.

Here’s how to set up OBS-clock:

1. Access the official site of OBS-clock

2. Select a Template

3. Choose “Clock Mode” or “Timer Mode”

4. Choose “Digital Mode” or “Analog Mode”

5. Obtain the URL
　Once settings are finished, copy the “URL” displayed at the top right of the screen. This URL is what you will paste into OBS.

Next, launch OBS and introduce it following these steps:

1. Select “Browser” from “Sources”

2. Paste the copied URL into the “URL” field

3. Adjust the size and position to fit the design on the screen

Sucolab

Sucolab is a platform offering a wealth of templates with high customizability. Membership registration is required, but you can complete the setup with just a URL, no downloads needed.

For those committed to design or wanting to enhance their streaming screen, it is highly recommended.

Here’s how to introduce the clock with Sucolab:

1. Account Registration
　Access Sucolab’s official site and click “Register”. You can sign in using a Google or X (formerly Twitter) account.

2. Choose a Clock Template
　After logging in, click the “Add Item” button at the top right of the screen and select “Clock”. Choose a design that suits your streaming style from the abundant templates.

3. Customize the Design
　You can freely adjust font size, text color, background color, and layout. You can also check placements on Sucolab.

4. Obtain Streaming URL
　Click on “Connect to Streaming Software” to display the URL and then copy it.

BOOTH

BOOTH is a platform where you can purchase and download materials created by creators.

Not only can you obtain the previously mentioned “Neon Flip Clock” from BOOTH, but there are also a variety of materials available ranging from stylish designs for live streaming to colorful and cute designs.

Here’s how to use BOOTH:

1. Log in to BOOTH
　Access the official site and log in with your Pixiv account.

2. Search and Purchase Materials
　Search for “OBS Clock” to select materials of your liking. Click “Download” for free or “Add to Cart” for paid items. If you’re looking for overlay materials as well, search “OBS Clock Overlay”.

3. Download Materials
　After purchase or free download, extract the files for use.

For OBS setting steps, proceed as follows:

1. Unzip the Downloaded File
　Check the HTML file or image materials inside the extracted file.

2. Add to OBS
　Launch OBS, select “Browser” from “Sources”, and check “Use local file” to specify the extracted file.

3. Adjust Placement
　Drag and adjust placement to your preferred position on the streaming screen, such as a corner or center.

How to Display a Clock Using Alive Studio

Using the streaming screen design service Alive Studio, you can not only place backgrounds and accessories but also display a clock with a single touch. There’s a monthly fee, so if you want to not only display the clock but also change the background according to events and seasons, or liven up your stream with gimmicks like topic roulette and sound effects, it is recommended.

1. Download the script from the official Alive Studio website.

2. In the OBS Studio top menu bar, select “Tools” and then select Scripts

3. Click the “+” button at the bottom right to load the Alive Studio script file downloaded earlier. Select the scene where you will use Alive Studio and press the “Add” button, then close.

4. In the top menu bar of OBS, select “Docks” and then “Custom Browser Docks”

5. Enter the dock name and URL (as shown in the red box below)

6. Ensure the box is checked for Alive Studio in the bottom of the dock menu. Initially, there will be a login screen, so authenticate and log in with a Google account.

7. From the menu on the left, select “Device” and then click on “Digital Clock”

8. Choose your favorite clock design, click on it, and it will be reflected on the streaming screen

Alive Studio allows you to add or remove elements displayed in real time, so depending on how you use it, it can broaden the scope of your streaming. However, since there is a cost involved for the purpose of just using a clock, consider it along with other purposes, such as not having the time to search for individual materials or always wanting to stream with a fresh screen.

What’s Next After Displaying a Clock in OBS?

We introduced methods for displaying a clock in OBS and recommended templates. Adding a clock can create a sense of real-time presence and convenient streaming for viewers.

Watch the tutorial video here.

If you’re interested in designing the entire layout of your streaming screen, the streaming screen creation service Alive Studio is recommended.

• Use over 1,400 background and accessory materials provided by the VTuber materials production team “Usaneko Memory”!
• Use over 100 BGM tracks provided by the music materials site “Maou Tamashii”!
• Features a topic roulette and counter functionality!
• Access all features for just 980 yen per month (incl. tax)!

“If the streaming screen design isn’t quite right…” “I want a design that attracts more viewers!”
The solution to such issues is Alive Studio.

Try a free 7-day trial and elevate your stream!