Clocks and Watches in CSS

A couple of years ago, when CSS trigonometry functions became baseline, I wrote an article about them. One of the examples I did, was a CSS-only analog clock: Since then, CSS has introduced a bunch of new features — one being offset-path, which is perfect for creating indices on a clock (I sound like an horology expert, but I Googled that). So, without further ado, let's expand my old example with some more, cool features! We'll wrap it within a Web Component for easier customization, but you can stick with CSS-only, if you want. First, we set up a simple grid, divided into 3 rows: :host { aspect-ratio: 1; background: #f2f2f2; border-radius: 50%; display: grid; grid-template-rows: repeat(3, 1fr); } The indices are a bunch of elements within a , using offset-distance / path to place them around the circle: li { display: inline-block; list-style: none; offset-distance: var(--_d); offset-path: content-box; width: fit-content; } Each has a degree (actually a percentage), defined in the --_d custom property: | This gets us: By default, offset-rotate automatically rotates elements to follow the path direction. This behavior is exactly what we need for the indices, so we don't need to set any additional rotation. Now, for the numerals, we'll also use , but this time within an ordered list, : 1 We'll use cos() and sin() to place the numerals, like in my original example. li { --_r: calc((100% - 15cqi) / 2); --_x: calc(var(--_r) + (var(--_r) * cos(var(--_d)))); --_y: calc(var(--_r) + (var(--_r) * sin(var(--_d)))); aspect-ratio: 1; display: grid; left: var(--_x); place-content: center; position: absolute; top: var(--_y); width: 15cqi; } And we get: Now, let's create the markup for the hands and date. The cap will be added as a pseudo-element. I had a hard time trying to wrap my head around what good, semantic markup would be here? I gave up, and just used a bunch of s

Feb 25, 2025 - 15:07

A couple of years ago, when CSS trigonometry functions became baseline, I wrote an article about them. One of the examples I did, was a CSS-only analog clock:

Since then, CSS has introduced a bunch of new features — one being offset-path, which is perfect for creating indices on a clock (I sound like an horology expert, but I Googled that).

So, without further ado, let's expand my old example with some more, cool features! We'll wrap it within a Web Component for easier customization, but you can stick with CSS-only, if you want.

First, we set up a simple grid, divided into 3 rows:

:host {
  aspect-ratio: 1;
  background: #f2f2f2;
  border-radius: 50%;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

The indices are a bunch of

elements within a

offset-distance / path

li {
  display: inline-block;
  list-style: none;
  offset-distance: var(--_d);
  offset-path: content-box;
  width: fit-content;
}

Each

has a degree (actually a percentage), defined in the --_d custom property:
```
 style="--_d:0%">|
```

This gets us:

By default, offset-rotate automatically rotates elements to follow the path direction. This behavior is exactly what we need for the indices, so we don't need to set any additional rotation.

Now, for the numerals, we'll also use

, but this time within an ordered list,


   style="--_d:300deg">1

We'll use cos() and sin() to place the numerals, like in my original example.

li {
  --_r: calc((100% - 15cqi) / 2);
  --_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));
  --_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));
  aspect-ratio: 1;
  display: grid;
  left: var(--_x);
  place-content: center;
  position: absolute;
  top: var(--_y);
  width: 15cqi;
}

And we get:

Now, let's create the markup for the hands and date. The cap will be added as a pseudo-element. I had a hard time trying to wrap my head around what good, semantic markup would be here? I gave up, and just used a bunch of