Digital Clock Widget
NewAdd a free digital clock to any website. The clock shows the time in seven-segment digits, like an LED display. Pick a colour, light or dark theme, time zone, 12 or 24-hour format and size, 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/digital-clock-01.js" defer></script>
<xorbin-digital-clock-01 color="blue" theme="auto" size="480"></xorbin-digital-clock-01>
The <script> line is needed only once per page, even if the page shows several clocks. To host the script yourself, download digital-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 | graphite, red, orange, green, blue, or any CSS colour such as #0fa3b1 | graphite |
theme | light, dark, or auto to follow the visitor's system setting | auto |
seconds | true or false (show the seconds digits) | true |
format | 24 or 12 (12 adds an AM/PM indicator) | 24 |
blink | true or false (blink the last colon every half second) | true |
timezone | local, or a time zone name such as Europe/Vilnius or America/New_York | local |
size | Pixels (480) or any CSS width (100%, 30rem), measured with seconds shown | 480 |
background | card or none (digits on a transparent background) | card |
controls | none, all, or a list of seconds,format,theme,color | none |
persist | true or false (remember visitors' choices) | true |
Graphite turns near-white on the dark theme, so the digits stay readable. black and gray also give graphite.
Show several time zones
Add one clock per city with a timezone. The script line is needed only once:
<script src="https://xorbin.com/widgets/digital-clock-01.js" defer></script>
<xorbin-digital-clock-01 timezone="Europe/London" size="300"></xorbin-digital-clock-01>
<xorbin-digital-clock-01 timezone="America/New_York" size="300"></xorbin-digital-clock-01>
<xorbin-digital-clock-01 timezone="Asia/Tokyo" size="300"></xorbin-digital-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 stops updating while it is scrolled out of view or the browser tab is hidden.
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 Inter 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
- Analog clock widget — Add a classic clock face with hands to your website.
- Countdown timer widget — Count down to a sale, launch or event on your website.
- Unix timestamp converter — Convert timestamps to dates and back, across time zones.
Further reading
Last updated: