Clock Widget Generator
Build a live analog or digital clock for your website, blog, Notion page or stream overlay. Choose the time zone, dial, colors and 12- or 24-hour format, watch the preview tick, then copy a tiny self-contained HTML snippet, an iframe or a link.
Last updated:
Live preview
How to use the Clock Widget Generator
- Pick the clock type: analog, digital, or both together.
- Choose the time zone: a specific city such as New York or Tokyo, or Visitor's time to show each reader their own local time. Add an optional label like "London office".
- Set the display: dial style, digital style, size, font, 12/24-hour format, seconds, date and zone name.
- Style it: click a color theme or set your own colors and corner radius; the live preview updates instantly.
- Copy the embed: use HTML + JS for websites, iframe where scripts are blocked, or the Link tab for Notion, then paste it into your page.
Which clock style fits where?
| Use | Suggested setup | Why |
|---|---|---|
| Business "our local time" box | Digital, named city, 12-hour, seconds off, zone name on | Customers instantly see whether you are open; the zone abbreviation (EST/EDT) removes doubt. |
| Remote team page | Several small digital clocks, one per office | Scannable at a glance; each snippet is independent. |
| Classroom or teaching page | Analog, numbers 1–12, large, seconds on | Full numerals and a moving second hand help students read an analog face. |
| Blog sidebar or footer | Analog, tick marks or dots, small, transparent background | Decorative and calm; blends into any theme. |
| Live stream overlay (OBS) | Digital tiles, transparent background, Link tab | Add the link as a Browser Source; transparency keeps the scene visible behind it. |
| Notion dashboard | Analog + digital, medium, date on | One embed gives a clock face, exact time and today's date. |
How the widget tells the time
The clock reads the current moment from the visitor's device (Date.now(), milliseconds since 1 January 1970 UTC) and converts it to the chosen zone with the browser's built-in Intl.DateTimeFormat and the IANA time zone database. Because the zone is stored by name, such as Europe/London, rather than as a fixed offset, the clock follows daylight saving and any future rule changes your visitors' browsers learn about.
The analog hands use the standard angles, measured clockwise from 12:
- Second hand = seconds × 6° (360° ÷ 60)
- Minute hand = (minutes + seconds ÷ 60) × 6°
- Hour hand = (hours mod 12 + minutes ÷ 60) × 30° (360° ÷ 12)
So at 3:30 the hour hand sits at 105°, exactly halfway between the 3 and the 4, just like a real wall clock. With the smooth sweep option the second hand also includes milliseconds and glides instead of jumping.
Tips for a clean-looking clock
- Turn seconds off for business-hours clocks; a ticking number draws attention away from your content.
- Label the location ("Head office, Denver") when the zone name alone could confuse visitors.
- Use 24-hour time for international audiences and schedules to avoid AM/PM mix-ups.
- Check contrast with the Dark and Grid preview backgrounds before using a transparent background.
- Keep one snippet per clock. Each has a unique ID, so copying the same code twice on one page shows only the first clock; generate a new one instead.
Frequently asked questions
How do I add a clock to my website?
Design the clock, stay on the HTML + JS code tab and press Copy code. Paste it into a Custom HTML block (WordPress), Code block (Squarespace), Embed HTML element (Wix), Embed element (Webflow) or straight into your page's HTML. The clock starts ticking as soon as the page loads; no files or accounts are needed.
Does the clock widget handle daylight saving time?
Yes. The widget never hard-codes an offset. Every second it asks the visitor's browser what time it is in the chosen IANA time zone (for example America/New_York), and browsers ship an up-to-date time zone database, so the switch between standard and daylight time happens automatically on the correct date.
What does the 'Visitor's own local time' option do?
Instead of one fixed city, the clock shows whatever time zone the visitor's device is set to, so a reader in Chicago sees Central time and a reader in Paris sees Central European time. Choose a named zone instead when the clock should show your office, store or event location for everyone.
How accurate is the clock?
It is as accurate as the visitor's device clock, which on phones and most computers is synchronized automatically over the internet and is usually within a fraction of a second of official time. The widget re-reads the time on every tick rather than counting on its own, so it never drifts even if the tab was asleep.
Can I put several clocks for different cities on one page?
Yes. Generate one clock per city and paste each snippet; every snippet gets its own random ID and scoped CSS, so they don't interfere. For a quick office wall of time zones, the Small size with the digital style fits three or four clocks side by side.
How do I add a clock to Notion?
Open the Link (Notion) tab and press Copy link. In Notion, type /embed, paste the link and choose Embed link, then drag the block's edges to fit. All settings are stored inside the link, so nothing is saved on a server and the clock keeps working.
Does the widget use cookies or slow my page down?
No cookies, no tracking and no external requests. The snippet is a few kilobytes of HTML, CSS and plain JavaScript that updates the display once per second (or with the browser's animation frame if you turn on the smooth sweeping second hand, which pauses automatically in background tabs).
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.