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 enter the desired time zone identifier for your zone.
Styling and Formatting
The clock features a number of classic preset formats like “15:23:17” or “11/05/26”, and you can customize it further through the use of templated keywords and text. To customize the clock face, open the clock settings window to edit the active template.
Example:
The {ordinal} of {month-name}, {year} → The eleventh of May, 2026
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: "🏡😵💫🚕";
}