Site Building
Note: Daylight savings time (DST) is not accounted for.
Los Angeles (-7)
18:49:14
Shanghai (+8)
09:50:
Example: The {ordinal} of {month-name}, {year} →
{roman-year}1
{year}
{ordinal}2
{day-of-month}
{month-name}
{month}
{day}
{time-of-day}3
{period}
{hour}
{minute}
{second}
{centisecond}
1 Roman numerals
2 Ordinal date: “fifth” as opposed to “five”
3 Hours of the day subdivided into three-hour subsections.
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:
Tabular Lining:
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: "🏡😵💫🚕";
}