Free World Clock with a Live Map

Key features

• Live world map: A vector world map (built with D3.js) renders every continent in your theme color. The night side is shaded in real time from the sun's subsolar point, so you can literally see where the sun has set.
• 580+ cities, every UTC offset in use: Searchable database covering every offset the world runs on, down to the quarter-hour oddities like UTC+5:45 (Kathmandu), UTC+8:45 (Eucla) and UTC+12:45 (Chatham Islands).
• Day and night cards: Each city card is light while the sun is up there and dark once it has set, a cue you read faster than the numbers themselves.
• Hover and click on the map: Hover a card to highlight its pin and tooltip on the map. Click to lock the highlight, which helps when you want to point at a city in a screenshot or on a call. Click anywhere outside to release.
• Drag-and-drop reorder: Drag any card to a new position. The order is yours: put your home city first, then the cities you check the most.
• Daylight Saving handled automatically: Each city is tagged with an IANA zone (e.g. America/New_York) so the browser handles DST transitions for you and there is nothing to update twice a year.
• Works on any device: Full map and drag-drop on desktop. On mobile the map is read-only and search lives above a single-column card list. Cards are tap-friendly with a clear remove button.
• 8 theme colors: Dark, Light, Red, Teal, Blue, Purple, Green and Slate. The map continents take the accent color too, so a theme change is more than a background swap.
• Keeps going if your connection drops: Once the page has loaded, the clock keeps ticking and the night side of the map keeps updating with no connection. Reloading the page needs one again, because the map and the city list are fetched on load.

How to use the world clock

Step 1: Add a city

On desktop, type a city name into the search box in the top-left corner of the map. On mobile, the search box sits above the cards. As you type, matching cities appear in a dropdown, and picking one adds it in a single click. You can also stay on the keyboard: the arrow keys move through the list and Enter adds the highlighted city.

Step 2: Read the local time

Every city you add gets two things: a small pin on the world map and a card below. Each card shows the city name, country, the current local time and today's date. Light card = it's daytime there. Dark card = it's the middle of the night.

Step 3: Hover or click for details

Hover a card with the mouse and the corresponding pin lights up on the map with a tooltip showing the city's full name. Click a card to lock that highlight on the map. The page scrolls back up to the map so you can see it. Click outside the map or on another card to release. Hovering the pin directly on the map does the same.

Step 4: Reorder by dragging

Press and hold any card with the mouse, drag it to where you want it, and drop. The new order saves immediately. This is the easiest way to put your home city first and group cities by region.

Step 5: Remove a city

Hover a card and a small × button appears in the top-left corner. Click it to remove the card and its pin from the map. On mobile, the × is always visible.

When to use an online world clock

Remote and distributed teams

If your team is spread across multiple countries, a world clock is faster than mental math, and nobody wants to be the person DM-ing a teammate at 3 AM their time. Add the cities your colleagues live in, drag your home city to the front, and a glance tells you who is at their desk.

Scheduling international calls

Need to know whether 9 AM in San Francisco is too late to call Tokyo? Add both cities and read the times directly. The dark/light shading also tells you which side is comfortably awake and which is going to be groggy, which is useful when you're deciding who should host.

Family and friends abroad

"What time is it where mom lives right now?" One glance. Add the city once and you'll never have to do the +7 / +12 hours mental math again.

Travel planning

Before a flight, add your destination so you can start adjusting mentally. After landing, the clock also helps with jet lag, because knowing what your body thinks the time is versus what the local clock says is half the battle.

Trading and markets

Many financial markets list opening hours in their local exchange's time zone (e.g. Tokyo opens 09:00 JST). Add the relevant cities and you'll always see the time in the right zone, with DST handled automatically.

Sports, esports and live broadcasts

"What time does the match start here?" If the game is announced as 20:00 CET and you live in São Paulo, add Berlin and São Paulo and read both times side by side.

How the world clock works under the hood

• The map is a single SVG drawn with D3.js from a GeoJSON file of country borders. An equirectangular projection (flat lat/lon) makes pin placement trivial, because latitude and longitude map straight onto pixels.
• The night side of the map is drawn as a 90° geographic circle around the antisolar point, the point on Earth directly opposite the sun. Finding that point takes two standard solar formulas, declination and the equation of time, plus your computer's UTC clock. It updates once a minute.
• Each city in the database is tagged with an IANA time zone. The browser converts UTC to local time via Intl.DateTimeFormat({ timeZone: ... }), which means DST rules are inherited from the browser's tz database and stay current as long as your browser does.
• Selected cities, their order and your theme are saved to localStorage. Nothing is sent to a server.

Tips & tricks

• Pin your home city first. Drag it to position #1 so every other card reads as a delta from "your time".
• Group by region. Cluster Asian cities together, then European, then American. The card grid wraps automatically and the visual rhythm makes it easier to scan.
• Use the click-to-lock trick. When sharing your screen on a call, click a card to keep the pin highlighted, so the person on the other side knows exactly which city you're pointing at.
• The shading on the map is real. The dark half of the map is the side of Earth where the sun is down right now, and its edge is the line where the sun is rising and setting. A pin just inside the dark side has only just had its sunset.
• Click the search box before you type. An empty box already lists popular cities, so adding somewhere like Singapore or Toronto takes one click and no typing at all.

Frequently asked questions