A collection of free CSS and HTML clocks, some use JavaScript, in analog, digital format, with animations and effects, widgets, timer, etc. with current time, stopwatches, countdown and calendars.
All CSS examples are customizable. If you click on the ‘See Clock’ buttons you can access the online examples of the CSS fonts and codes and modify it to your liking or learn how to create a CSS clock to make your own designs. You can find instructions on how to add a CSS clock to HTML, although most also include an iframe code that is easier to insert.
Table of Contents
CSS clock with calendar
See the Pen Calendar and Clock by mselmany (@mselmany) on CodePen.
CSS watch face with animation
See the Pen CSS3 Working Clock by Ilia (@iliadraznin) on CodePen.
CSS clock with words
See the Pen Circular Calendar Display by Matthew Juggins (@mattjuggins) on CodePen.
CSS digital clock
See the Pen Pomodoro Clock by Putra Aryotama (@putraaryotama) on CodePen.
CSS clock with 3D effect
See the Pen Rotating Clock by Vicio Bonura (@ V17h3m) on CodePen.
Black and White Analog CSS Clock
See the Pen Analog Digital clock by Vineeth.TR (@vineethtrv) on CodePen.
CSS clock with second hand
See the Pen Clock rebound by Lionel T (@elrumordelaluz) on CodePen.
Customizable CSS clock
See the Pen [v2] Apple Watch Face Imitation (Customizable) by Thai Pangsakulyanont (@dtinth) on CodePen.
CSS countdown clock
Classic Circular Analog CSS Clock
Rotating CSS clock example
Pure CSS animated clock
CSS clock with bars
CSS clock with glitch
CSS clock with 3D effect
See the Pen 3D CSS clock by Virgil Pana (@virgilpana) on CodePen.
Classic CSS Clock
3D rotating CSS clock
Simple CSS clock
Custom Basic CSS Clock
See the Pen CSS Clock by aPinix (@aPinix) on CodePen.
Luminous digital CSS clock
CSS example with animated clocks
CSS wrist watch
CSS clock with stopwatch / timer
Analog / Binary CSS Clock
CSS clock with red background
CSS clock that appears to spin in midair
Vintage radio clock
CSS clock with adjustable date
Classic digital CSS clock
CSS canvas clock
CSS clock with date and day of the week
CSS clock with typography
CSS watch with wristband animation
Rotating CSS clock with neon effect
Adjustable Pure CSS Clock
CSS clock with cubic shape
International Multiple World CSS Clock
CSS wall clock with sound
CSS clock with scrolling
Countdown digital clock
CSS clock with falling hours
CSS clock with percentage
CSS clock and calendar
CSS clock with long shadow
CSS clock with milliseconds
