World Clock Online - Live Time in Cities Around the World

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 using the sun's subsolar point - so you can literally see where the sun has set.
• 1,300+ cities, every IANA time zone: Searchable database covering every populated time zone, including unusual ones like UTC+5:30 (Kolkata), UTC+9:30 (Adelaide), UTC+12:45 (Chatham Islands).
• Day / night cards: Each city card is light if it's daytime there and dark if it's night - a visual cue that's faster to read than just numbers on a clock.
• Hover and click on the map: Hover a card to highlight its pin and tooltip on the map. Click to lock the highlight - useful 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.
• Saved locally: Your cities, their order and your theme all live in your browser's localStorage. No account, no server, no tracking.
• 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 - no manual updates 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, Slate. The world clock matches the rest of stopwatch-online.com.
• Works offline: Once the page is loaded, the world clock keeps ticking and updating the night side of the map without a connection.

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 - pick one and it's added in one click. You can also press the + button to add the highlighted suggestion.

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 also scrolls back 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 a world clock online

Remote and distributed teams

If your team is spread across multiple countries, a world clock is faster than mental math - you don't want to be the one 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 - useful information for picking the meeting host.

Family and friends abroad

"What time is it where mum 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 is also helpful for jet-lag - knowing what your body thinks the time is vs. 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, just 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 - latitude and longitude map directly to pixels.
• The night side of the map is rendered as a 90° geographic circle around the antisolar point (the point on Earth opposite the sun). The same trigonometry NOAA publishes for solar position is used: solar declination + equation-of-time + 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 band you see crossing the map is the actual line where it's dawn/dusk right now. If a city's pin sits inside the dark band, sunset hasn't quite happened yet but is close.
• Cards remember their order. Don't be afraid to drop the city you don't need at the bottom - your previous order is saved per-browser.

Frequently asked questions