Analog Clock Widget
NewAdd a free analog clock to any website. Pick a colour, light or dark theme, time zone, size and second-hand style, and see the result live. Copy the embed code and paste it into your page. It works in plain HTML, WordPress, Webflow and any site builder that accepts custom HTML.
How to add the clock to your website
- Choose the clock's colour, theme, time zone and size above. The preview updates as you go.
- Click Copy embed code.
- Paste the code into your page's HTML where the clock should appear. In WordPress, use a Custom HTML block.
The embed code looks like this:
<script src="https://xorbin.com/widgets/analog-clock-01.js" defer></script>
<xorbin-analog-clock-01 color="blue" theme="auto" size="320"></xorbin-analog-clock-01>
The <script> line is needed only once per page, even if the page shows several clocks. To host the script yourself, download analog-clock-01.js, upload it to your site, and change the Script URL.
Attribute reference
All attributes are optional. Change them in the embed code to adjust the clock without coming back to this page.
| Attribute | Values | Default |
|---|---|---|
color | black, gray, red, orange, green, blue, violet, or any CSS colour such as #0fa3b1 | black |
theme | light, dark, or auto to follow the visitor's system setting | auto |
motion | sweep or tick (second-hand movement) | sweep |
seconds | true or false (show the second hand) | true |
format | 24 or 12 (digital time) | 24 |
digital, date | true or false | true |
timezone | local, or a time zone name such as Europe/Vilnius or America/New_York | local |
label | Short text shown above the time, such as a city name | none |
size | Pixels (320) or any CSS width (100%, 20rem) | 320 |
background | none or card | none |
controls | none, all, or a list of color,theme,motion,format | none |
persist | true or false (remember visitors' choices) | true |
Show several time zones
Add one clock per city with a timezone and a label. The script line is needed only once:
<script src="https://xorbin.com/widgets/analog-clock-01.js" defer></script>
<xorbin-analog-clock-01 timezone="Europe/London" label="London" size="200"></xorbin-analog-clock-01>
<xorbin-analog-clock-01 timezone="America/New_York" label="New York" size="200"></xorbin-analog-clock-01>
<xorbin-analog-clock-01 timezone="Asia/Tokyo" label="Tokyo" size="200"></xorbin-analog-clock-01>
Daylight saving time is handled automatically by the visitor's browser. If several clocks on one page show visitor controls, give each one its own id so their saved choices stay separate.
Frequently asked questions
Is the clock widget free?
Yes. The widget is free to use, with no sign-up.
Whose time does the clock show?
By default, each visitor sees their own local time, taken from their device. Set a timezone to show the same city's time to everyone.
Does the widget slow down my page?
No. The script is small, loads with defer so it doesn't block the page, and the clock pauses its animation while it is scrolled out of view.
Does the widget collect visitor data?
No. It has no tracking or cookies. If visitor controls are on, their choices are saved only in their own browser. The clock loads the Russo One font from Google Fonts unless your page already includes it.
Can I change the clock after I paste the code?
Yes. Edit the attributes in the code, using the attribute reference above, or come back to this page, configure the clock again and copy the new code.
Related tools
- Unix timestamp converter — Convert timestamps to dates and back, across time zones.
- WCAG color contrast checker — Check that your page's text and background colours are readable.
Further reading
Last updated: