Skip to content
Global ClockTime zone converter & meeting planner
PAGES
SETTINGS
Clock
Working hours
Start
09
End
18
Theme

AUTO follows the operating system. Working hours drive the green banding on every grid. All four persist on this device only.

Add Global Clock to your site

A read-only clock strip for a docs page, a status page or a team wiki. Build it below — four layouts, your own type, colour and labels — then take the tag. One script tag, no account, no tracking, and it keeps working if we redesign around it.

Design it here

Choose the cities and the look; the panel beside the controls is the widget itself, running. When it looks right, take the tag at the bottom.

Cities
  • Europe/Berlin
  • America/New_York
  • Asia/Tokyo
Layout
Shape
Frame
Bare drops the background and border so it sits on your page.
Corners
Size
Three steps of your own body text — or drag the corner of the preview for any size between.
Type & colour
Typeface
YOURS takes the font of the page it lands on.
Accent
Colours the numerals and the heading.
The clock
Theme
AUTO follows each visitor's own system.
Clock
Second line
Costs a repaint a second.
Filled between 06:00 and 18:00 where the city is.
ON YOUR PAGE
FULL WIDTH · 1.00× TEXT

Drag the corner: sideways for width, up and down for the type. Theme is AUTO, drawn as it looks on a light system.

YOUR SNIPPET
<script src="https://global-clock.com/embed.js"  data-zones="Europe/Berlin,America/New_York,Asia/Tokyo"></script>

Paste it where the clocks should appear. Nothing is saved here — the design travels in the link.

The snippet

Paste it where the clocks should appear. Cities are IANA zone identifiers, comma separated, in the order you want them shown. That is the whole of it — every other attribute is an option with a default, and the studio writes out only the ones you actually changed:

<script src="https://global-clock.com/embed.js"
  data-zones="Europe/Berlin,America/New_York,Asia/Tokyo"></script>

Nothing in the studio is saved anywhere. A design travels in the link at the top of your browser, so you can send one to whoever owns the page it is going on and they will open this page on exactly what you built.

Every option

Each one is a plain attribute on the tag, so a design can be edited in your own source later without coming back here. A value the script does not recognise falls back to the default rather than breaking the strip.

data-zonesIANA zone identifiers, comma separated, in display order. Up to eight.required
data-labelsYour own names for the rows, comma separated, if “Berlin” should read “HQ”.city names
data-layoutlist — a stack of rows. strip — a row of columns. grid — one tile per city. inline — a single line inside a paragraph.list
data-themelight, dark, or auto to follow the visitor’s system.auto
data-format24 or 12.24
data-secondsShow seconds. Costs a repaint a second.false
data-subWhat the small line under each name says: zone for the IANA id, offset for UTC+2, date for the local day, none for nothing.zone
data-framecard for a bordered box; plain for no box at all, so the strip sits directly on your page.card
data-cornerssharp, soft or round.soft
data-fontsans pairs a sans with mono numerals; serif and mono set both; inherit takes your page’s own typeface.sans
data-sizes, m or l — a step either side of the text it sits in — or a number between 0.7 and 1.8 for anything in between. A multiplier on your own type, never a pixel size.m
data-widthA maximum width in pixels, 160 to 720. Left off, the strip fills whatever column you put it in; set, it stops there and still shrinks on a narrow screen.fluid
data-daynightA filled dot beside cities in daylight, an empty ring beside cities after dark.false
data-accentA hex colour — #173d31 — for the numerals and the heading. Nothing else is read.none
data-titleA short heading above the strip, in your accent colour.none

How big it is

The strip has no size of its own. It fills the column you drop it into, and its type is a multiple of your page’s own — so it arrives at the scale everything around it is set at, and a reader who has made your text bigger gets a bigger clock too. Where that is not what you want, data-size multiplies the type and data-width caps the box. In the studio both are one gesture: take the corner of the preview and pull — sideways for the width, up and down for the type — or use the arrow keys once the corner has focus.

Which layout for which page

List is the one to reach for when the clocks are the content — a support page, a contact page, a wiki’s front door. Strip is a header or a status bar: bare, small, several cities in one line of columns. Grid gives each city a tile, which is what a team page wants when the names matter as much as the times. Inline is a sentence — set the typeface to yours and it disappears into the paragraph around it.

What it does on the page

About 6 kB gzipped, no dependencies, no cookies and no requests after the first load — offsets are computed in the browser from the visitor’s own time zone data. It renders in a shadow root, so it cannot inherit or leak your styles, and it inherits your font size so it sits in body copy at whatever scale you set. The typeface is the one exception, and only when you ask for it: data-font="inherit" lets your family through as well.

If a zone changes rules, the embed follows the visitor’s operating system, not our servers — an old embed on a stale page still shows the right time.

Instead of the script

A plain link works too, and is the better choice in an email or a README: link any city page and it opens at the reader’s own offset. There is no iframe version — an iframe cannot read the visitor’s time zone, which is the only thing this widget is for.

Which zone identifier? →How IANA names zones, and why aliases still resolve.Use the planner instead →For agreeing on an hour rather than displaying one.