Create a CSS-only Word Clock

Mate Marschalko
6 min readDec 15, 2021

That’s right! We are going to build a real-time, animated Word Clock that keeps the time. All with just HTML and CSS and no JavaScript at all.

Adding the Words

First, we need to add all the words including the fillers to make the rectangle. I organised everything into rows, and used a mono-space font to make sure with the same number of characters in each row, the rows will end…

--

--

Mate Marschalko

Senior Creative Developer, Generative AI, Electronics with over 15 years experience | JavaScript, HTML, CSS