The clock is a live-updated reference to the current time and date that can be placed anywhere in your site. To use it, place the cursor where you’d like to insert a clock, go to the “Page Options” menu (in the top menu bar) and choose Clock.

Time Zones

By default, the clock will display “Local Time”: the time and date of the computer viewing the site. To have the clock display the time of a specific time zone, uncheck the “Local Time” option and choose a custom UTC offset.

London (UTC) — 05:14
Los Angeles (-7) — 22:14
Mogadishu (+3) — 08:14
Shanghai (+8) — 13:14

Note: Daylight savings time (DST) is not accounted for.

Styling and Formatting

The clock features a number of classic preset formats like “12:07:56” or “13/10/23”, and you can customize it further through the use of templated keywords and text. To customize the clock face, open the clock settings window and choose “Custom” from the “Clock Format” menu.

Example:
The {ordinal} of {month-name}, {year} → The twenty-first of September, 2023

See the full list and live examples of keywords here.

Choose additional formatting options through the settings window, like whether to use a 12 or 24-hour clock. Change the “Add Leading Zero” values to pad single-digit values with an extra “0”: 3 → 03

CSS

The clock can be targeted through digital-clock in your CSS. Each keyword-determined section of the clock can be targeted with digital-clock::part(section), or individually by their keyword, e.g. digital-clock::part(month-name).

For example, the clock uses tabular lining numerals by default, if they are available in the active typeface. To switch to a different style of numerals in your clock, add this into your CSS:

digital-clock::part(section) {
    font-variant: lining-nums;
}

While this may look more desirable in certain circumstances, be aware that in non-monospace typefaces it may cause “jumping” in clocks that change or progress quickly:

Customizing Text

Any non-numeric value can be customized through CSS variables, which is useful if you want to translate the various terms or write your own copy.

The below code reproduces all of the default text for the clock; paste it into your CSS and modify as needed. Each block of variables is headed by its corresponding keyword.

digital-clock {

/* {time-of-day} */
  --0-3: "late night";
   --3-6: "early morning";
   --6-9: "morning";
   --9-12: "late morning";
   --12-15: "afternoon";
   --15-18: "late afternoon";
   --18-21: "evening";
   --21-24: "late evening";

/* {period} */
   --am: "AM";
   --pm: "PM";

/* {day} */
   --sunday: "Sunday";
   --monday: "Monday";
   --tuesday: "Tuesday";
   --wednesday: "Wednesday";
   --thursday: "Thursday";
   --friday: "Friday";
   --saturday: "Saturday";

/* {month-name} */
   --january: "January";
   --february: "February";
   --march: "March";
   --april: "April";
   --may: "May";
   --june: "June";
   --july: "July";
   --august: "August";
   --september: "September";
   --october: "October";
   --november: "November";
   --december: "December";

/* {ordinal} */
   --ordinal-1: "first";
   --ordinal-2: "second";
   --ordinal-3: "third";
   --ordinal-4: "fourth";
   --ordinal-5: "fifth";
   --ordinal-6: "sixth";
   --ordinal-7: "seventh";
   --ordinal-8: "eighth";
   --ordinal-9: "ninth";
   --ordinal-10: "tenth";
   --ordinal-11: "eleventh";
   --ordinal-12: "twelfth";
   --ordinal-13: "thirteenth";
   --ordinal-14: "fourteenth";
   --ordinal-15: "fifteenth";
   --ordinal-16: "sixteenth";
   --ordinal-17: "seventeenth";
   --ordinal-18: "eighteenth";
   --ordinal-19: "nineteenth";
   --ordinal-20: "twentieth";
   --ordinal-21: "twenty-first";
   --ordinal-22: "twenty-second";
   --ordinal-23: "twenty-third";
   --ordinal-24: "twenty-fourth";
   --ordinal-25: "twenty-fifth";
   --ordinal-26: "twenty-sixth";
   --ordinal-27: "twenty-seventh";
   --ordinal-28: "twenty-eighth";
   --ordinal-29: "twenty-ninth";
   --ordinal-30: "thirtieth";
   --ordinal-31: "thirty-first";
}

For example, the below CSS modifies the clock to display the current {time-of-day} as emoji:

digital-clock {
   --0-3: "🌌🛌💤";
   --3-6: "🥱📢🐓";
   --6-9: "😪☕️📰";
   --9-12: "🌳🏢🚙";
   --12-15: "😋🥢🍱";
   --15-18: "👩🏽‍💻👨‍💻👨🏾‍💻";
   --18-21: "🍺😤🕺";
   --21-24: "🏡😵‍💫🚕";
}