Analog Clock Widget

Add a clean analog clock face to your website. It keeps real time for the visitor or for any city you choose, follows your light or dark theme and tells screen-reader users the time in words.

Time & Date Clock & time Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/analog-clock" title="Analog Clock by A2Z Tools" width="100%" height="460" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

The face, ticks, numerals and hands are drawn as SVG, so they stay sharp at any size. On every tick the widget reads the current hour, minute and second in the chosen time zone and rotates each hand to the angle for that moment; because the angles are recalculated from the clock each time, the hands never drift. The hour hand moves continuously between the numerals, as on a real clock. A small digital read-out and the date sit under the face, and the drawing carries a text label with the current time for assistive technology.

Method

  • Second hand = s x 6 degrees
  • Minute hand = m x 6 + s x 0.1 degrees
  • Hour hand = (h mod 12) x 30 + m x 0.5 + s / 120 degrees
  • h, m, s = wall-clock time in the chosen IANA zone at the current instant

Limitations

  • Only Western Arabic numerals (1-12) or plain ticks; Roman numerals and 24-hour dials are not offered.
  • The second hand jumps once per second; there is no smooth sweep (a quartz-style tick, not a mechanical sweep).
  • One zone per face - several faces side by side need several embeds, or the World Clock for a list.
  • Face colours follow the site theme tokens rather than a custom palette per clock.

Where publishers use it

  • Teaching children to read an analog clock on a school or tutoring site
  • Hotel and restaurant sites showing local time in a traditional style
  • Office dashboards with one analog face per regional team
  • Personal blogs and portfolio sidebars

Questions

Can I remove the numbers?

Yes. Add v_numerals=0 for a minimalist face with tick marks only.

Can it show another city's time?

Yes. Add v_zone with an IANA name such as Europe/Paris; the label defaults to the city name.

Why is the hour hand not exactly on the 10 at ten past ten?

Because a real clock's hour hand creeps forward all hour. At 10:10:30 the widget puts it at 305.25 degrees (300 for ten o'clock plus 5.25 for the minutes and seconds passed), the minute hand at 63 degrees and the second hand at 180.

Is it accessible?

The drawing has a text label giving the place, time and date, updated every minute, and the digital line underneath repeats the time.

Sources

  1. Time Zone Database (tz / zoneinfo) - IANA . Hours, minutes and seconds are read in the chosen IANA zone, including daylight saving

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Analog Clock
https://a2z.tools/embed/analog-clock

Related widgets

More Time & Date widgets →

Preview

CustomizeGet code