Free world clock widget for your website

What is a world clock widget?

A world clock widget is a small box on your website that shows the current time in one or more cities. Instead of asking visitors to work out time differences in their heads, it shows the answer directly: what time it is in London, New York or Tokyo right now, and whether it is still today or already tomorrow there.

The WebToolsMe world clock shows up to eight cities as a digital list or as analog clock faces. It updates every second or every minute, changes automatically when a country switches to or from daylight saving time, and can add a row with each visitor's own local time for easy comparison.

Who uses a world clock on their website?

A world clock is useful whenever your website, your customers or your team span more than one time zone. Typical examples:

• Remote teams and agencies that show office hours in each location, so clients know when someone is available.
• Travel, tourism and hotel sites that show the local time at the destination next to the visitor's own time.
• Online shops and support pages that serve international customers and want to make opening hours clear.
• Finance, crypto and trading blogs that follow when the major markets in New York, London and Tokyo open and close.
• Online courses, webinars and live streams where participants join from different countries.
• Expat and family blogs that keep the time at home and abroad side by side.

How to add the world clock to your site

Choose your cities and style above, then press Copy code. The code is a single script tag; paste it where the clock should appear and follow the steps for your platform:

Features

Time zones and daylight saving time

Most countries do not simply sit at a fixed distance from UTC (Coordinated Universal Time). Many move their clocks forward in spring and back in autumn, and they do it on different dates: the European Union changes on the last Sunday of March and October, the United States on the second Sunday of March and the first Sunday of November. Other countries, such as Turkey (UTC+3 all year since 2016), Japan, China and India, do not use daylight saving time at all.

That is why the widget never stores a fixed offset like "+3 hours". Each city is saved with its official time zone name from the IANA time zone database, for example Europe/Istanbul or America/New_York. The visitor's browser uses this database to work out the correct local time at every moment, including the hours around a clock change. When a government changes its time zone rules, browsers receive the update and the widget shows the new time without any change to your code.

For the same reason, the time difference shown next to each city is calculated live. During the weeks when Europe and North America have already changed their clocks at different dates, the difference between London and New York is four hours instead of five, and the widget shows exactly that.

12-hour or 24-hour format?

The 12-hour clock with AM and PM is common in the United States, Canada, Australia, India and a few other countries, while most of Europe, Asia and Latin America use the 24-hour clock. Choose the format that your audience reads most naturally; if your visitors come from everywhere, the 24-hour clock avoids any confusion between morning and evening.

The AM and PM markers, the day names and the dates are written in the widget language you pick, so a Japanese or Korean clock shows its own words for morning and afternoon. Showing seconds makes the clock feel alive; without seconds, the digital clock refreshes only once a minute, which is the lightest option.

Showing your visitor's local time

When you enable the visitor's local time, the first row of the clock shows the time on the visitor's own device, labelled in the widget language. Every other city then shows how many hours it is ahead of or behind the visitor, and whether it is yesterday, today or tomorrow there. A visitor in Berlin looking at a clock with Sydney sees at a glance that Sydney is, for example, nine hours ahead and already on tomorrow's date.

The local time comes from the visitor's browser, which knows its own time zone. Nothing about the visitor is sent to WebToolsMe or stored anywhere.

Speed and privacy

The world clock is a single small script. After it has loaded, it does not contact any server again: every second or minute, it calculates the time locally in the visitor's browser. It sets no cookies and collects no data.

The clock is drawn inside a sealed Shadow DOM box. Your theme's styles cannot change its look, and its styles cannot leak into your page, so it fits into WordPress themes, page builders and hand-written sites alike.

Tips for a useful world clock

• Put the most important city first; use the ↑ button in the city list to reorder.
• Three to five cities are easy to read; use more only if the clock has room, such as in a full-width section.
• Use names your visitors recognise. A clock for business hours might list "New York", "London" and "Singapore" rather than smaller nearby towns.
• For a narrow sidebar, a width of 300 to 360 pixels works well. Analog faces look best with three or four cities.
• Match the theme to your site: dark sites look better with the dark theme and an accent color from your brand.

Frequently asked questions