Collection of free Hand-picked HTML and CSS clocks: analog, digital, flip, animated and etc. Listed tutorials well played with 3d, gradients, etc. Some of the CSS Clocks are having beautiful animation effects using transitions. Demo and download available on each tutorial. CSS Clocks can be used directly without any changes and could be small changes based on your needs. Article will be helpful for designers and non-coders.
1) CSS Variable-Powered Clock
CSS Variable-Powered Clock
Tutorial/codes – Demo
Emily Hayman
NOVEMBER 08, 2016
HTML, CSS and JavaScript
2) Minimalist Clock, Pure CSS with current time
CSS only, minimalist clock
Tutorial/codes – Demo
Kyle Wetton
NOVEMBER 06, 2018
HTML, CSS and JavaScript
3) SVG Clock
A clock made with SVG which shows current time and uses SVG’s animation functionality.
Tutorial/codes – Demo
Mohamad Mohebifar
DECEMBER 03, 2014
HTML, CSS and JavaScript
4) Pure CSS Animated Clock
Pure CSS Animated Clock experiment.
Tutorial/codes – Demo
Jay Salvat
OCTOBER 13, 2014
HTML, CSS and JavaScript
5) ATC Vintage Radio Flip Clock
ATC Vintage Radio Flip Clock
Tutorial/codes – Demo
Tiffany Stoik
SEPTEMBER 10, 2015
HTML, CSS and JavaScript
6) Pomodoro Clock Design
Pomodoro Clock Design
Tutorial/codes – Demo
Putra Aryotama
JANUARY 01, 2017
HTML, CSS and JavaScript
7) Analog binary clock
analog binary clock
8) Flat design clock
Flat design working clock
Tutorial/codes – Demo
Fabrika World
FEBRUARY 18, 2015
HTML, CSS and JavaScript
9) 3d Flip Clock
A 3d Flip Clock using CSS transforms and transitions and a little JS to get things going.
Tutorial/codes – Demo
Gerwin van Royen
NOVEMBER 15, 2012
HTML, CSS and JavaScript
10) Pure HTML and CSS Braun Clock
Braun clock created in pure HTML and CSS for fun. Best rendered in Google Chrome. Still working out small visual bugs.
Tutorial/codes – Demo
Chris Ota
DECEMBER 24, 2014
HTML, CSS and JavaScript
11) Rotate Clock [CSS Only]
![Rotate Clock [CSS Only]](images/media/css-clocks/rotate-clock-css-only.gif "43 Hand-Picked CSS Clocks 11")
Rotate clock written in CSS3 only
12) Animated Digital LED Clock
A clock made of traditional 7 segment LEDs, animated with CSS and JS
13) jQuery Wall Clock
jQuery Wall Clock
Tutorial/codes – Demo
Matt Litzinger
MARCH 25, 2014
HTML, CSS and JavaScript
14) Clock with html css and javascript
Clock code and made it function like an actual clock.
15) Clocks and Calendars
Clocks and Calendars
16) Ticking Clock
Clock function that updates every second
Tutorial/codes – Demo
Eduard Fastovski
MARCH 20, 2014
HTML, CSS and JavaScript
17) Clock rebound
CSS Clock rebound
Tutorial/codes – Demo
Lionel T
SEPTEMBER 13, 2013
HTML, CSS and JavaScript
18) App Icon – Clock
App Icon – Clock
19) Animated clock (Pure CSS)
CSS-only animated clock. No JavaScript, canvas, SVG, images etc.
20) Pomodoro Clock
Pomodoro Clock
Tutorial/codes – Demo
Joe Weaver
JANUARY 27, 2018
HTML, CSS and JavaScript
21) CSS only clock of clocks
CSS only clock of clocks
22) Digital Analog Clock
A CSS transforms and animations clock. Javascript used to handle & manipulate classes.
23) Flat Clock and Date
CSS + Javascript flat clock and date.
Tutorial/codes – Demo
Joseph Shambrook
JULY 20, 2013
HTML, CSS and JavaScript
24) Wall clock UI Design
Wall clock UI Design
Tutorial/codes – Demo
Hugh Dai
DECEMBER 16, 2015
HTML, CSS and JavaScript
25) Column clock
A reproduction of the column clock available for the iOS
Tutorial/codes – Demo
Nelson Rodrigues
APRIL 12, 2014
HTML, CSS and JavaScript
26) SVG Analog Clock
SVG Analog Clock animation. The elastic easing gives the second needle that vintage effect
Tutorial/codes – Demo
Benjamin
NOVEMBER 07, 2013
HTML, CSS and JavaScript
27) Flat Design Clock
Flat Design Clock with CSS3 transition.
Tutorial/codes – Demo
Steven Fabre
JULY 07, 2013
HTML, CSS and JavaScript
28) Text Clock
A text readable clock.
Tutorial/codes – Demo
Bill Searle
MARCH 17, 2015
HTML, CSS and JavaScript
29) Clock Widget
HTML CSS SASS(SCSS) JavaScript SVG
30) SVG clock UI Design
SVG based clock UI design. Animated with GSAP.
31) Digital Glitch Clock
Glitch Clock
Tutorial/codes – Demo
Constantine
NOVEMBER 04, 2014
HTML, CSS and JavaScript
32) Digital Clock with Vue.js
Digital Clock with Vue.js
Tutorial/codes – Demo
Toshiyuki TAKAHASHI
AUGUST 19, 2017
HTML, CSS and JavaScript
33) Clock with moment.js & jquery
Clock with moment.js & jquery
34) Analog Clock with html, css & js
A pretty clock made with html, css and some javascript to get the time and update the clock.
35) Rotating Clock
Click the CLOCK to change the style.
Tutorial/codes – Demo
Vicio Bonura
APRIL 20, 2016
HTML, CSS and JavaScript
36) Mother Flippin Clock
A flip clock, you could easily add other animations by adjusting the CSS. Not supported on browsers that don’t support animation of pseudo elements. Apparently this no longer works on Chrome.
Tutorial/codes – Demo
Rik Schennink
JUNE 14, 2013
HTML, CSS and JavaScript
37) Flat Clock
Inspired by MomentJS’s homepage clock
Tutorial/codes – Demo
Joseph Shambrook
JUNE 20, 2013
HTML, CSS and JavaScript
38) Canvas Wall Clock w/t Night Mode
Canvas Wall Clock w/t Night Mode
Tutorial/codes – Demo
Moses Holmström
JANUARY 13, 2017
HTML, CSS and JavaScript
39) CSS Only Countdown Clock
A countdown clock that is powered only by CSS. The countdown length is 1 hour and it shows minutes, seconds and the hundredths of seconds as they tick.
40) Animated Pure CSS Clock
Animated Pure CSS Clock
41) Javascript Digital Clock Example
A simple digital clock.
42) CSS3 Working Clock
Working CSS3 analog clock, using CSS animations and shapes, without any images or JavaScript.
43) HTML 5 Canvas Polar Clock
HTML 5 Canvas Polar Clock
Tutorial/codes – Demo
Lennart Hase
AUGUST 29, 2013
HTML, CSS and JavaScript
Discussion about this post