Hand-picked HTML and CSS code examples, tutorials and articles
CSS Gallery, jQuery plugins

43 Hand-Picked CSS Clocks

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.

CSS Variable-Powered Clock

CSS Variable-Powered Clock

Author:
Emily Hayman
Created:
NOVEMBER 08, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: CSS Variable-Powered Clock

Minimalist Clock, Pure CSS with current time

CSS only, minimalist clock

Author:
Kyle Wetton
Created:
NOVEMBER 06, 2018
Made with:
HTML, CSS and JavaScript
Demo Image: Minimalist Clock, Pure CSS with current time

SVG Clock

A clock made with SVG which shows current time and uses SVG's animation functionality.

Author:
Mohamad Mohebifar
Created:
DECEMBER 03, 2014
Made with:
HTML, CSS and JavaScript
Demo Image: SVG Clock

Pure CSS Animated Clock

Pure CSS Animated Clock experiment.

Author:
Jay Salvat
Created:
OCTOBER 13, 2014
Made with:
HTML, CSS and JavaScript
Demo Image: Pure CSS Animated Clock

ATC Vintage Radio Flip Clock

ATC Vintage Radio Flip Clock

Author:
Tiffany Stoik
Created:
SEPTEMBER 10, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: ATC Vintage Radio Flip Clock

Pomodoro Clock Design

Pomodoro Clock Design

Author:
Putra Aryotama
Created:
JANUARY 01, 2017
Made with:
HTML, CSS and JavaScript
Demo Image: Pomodoro Clock Design

Analog binary clock

analog binary clock

Author:
Alex Taietti
Created:
MAY 16, 2017
Made with:
HTML, CSS and JavaScript
Demo Image: Analog binary clock

Flat design clock

Flat design working clock

Author:
Fabrika World
Created:
FEBRUARY 18, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Flat design clock

3d Flip Clock

A 3d Flip Clock using CSS transforms and transitions and a little JS to get things going.

Author:
Gerwin van Royen
Created:
NOVEMBER 15, 2012
Made with:
HTML, CSS and JavaScript
Demo Image: 3d Flip Clock

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.

Author:
Chris Ota
Created:
DECEMBER 24, 2014
Made with:
HTML, CSS and JavaScript
Demo Image: Pure HTML and CSS Braun Clock

Rotate Clock [CSS Only]

Rotate clock written in CSS3 only

Author:
Dawid Krajewski
Created:
DECEMBER 23, 2014
Made with:
HTML, CSS
Demo Image: Rotate Clock [CSS Only]

Animated Digital LED Clock

A clock made of traditional 7 segment LEDs, animated with CSS and JS

Author:
Collin
Created:
JUNE 09, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Animated Digital LED Clock

jQuery Wall Clock

jQuery Wall Clock

Author:
Matt Litzinger
Created:
MARCH 25, 2014
Made with:
HTML, CSS and JavaScript
Demo Image: jQuery Wall Clock

Clock with html css and javascript

Clock code and made it function like an actual clock.

Author:
Fabian D
Created:
OCTOBER 16, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: Clock with html css and javascript

Clocks and Calendars

Clocks and Calendars

Author:
Justin
Created:
APRIL 17, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Clocks and Calendars

Ticking Clock

Clock function that updates every second

Author:
Eduard Fastovski
Created:
MARCH 20, 2014
Made with:
HTML, CSS and JavaScript
Demo Image: Ticking Clock

Clock rebound

CSS Clock rebound

Author:
Lionel T
Created:
SEPTEMBER 13, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: Clock rebound

App Icon - Clock

App Icon - Clock

Author:
nicolazj
Created:
JANUARY 26, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: App Icon - Clock

Animated clock (Pure CSS)

CSS-only animated clock. No JavaScript, canvas, SVG, images etc.

Author:
Jan
Created:
APRIL 24, 2014
Made with:
HTML, CSS
Demo Image: Animated clock (Pure CSS)

Pomodoro Clock

Pomodoro Clock

Author:
Joe Weaver
Created:
JANUARY 27, 2018
Made with:
HTML, CSS and JavaScript
Demo Image: Pomodoro Clock

CSS only clock of clocks

CSS only clock of clocks

Author:
Razvan Spatariu
Created:
SEPTEMBER 21, 2015
Made with:
HTML, CSS
Demo Image: CSS only clock of clocks

Digital Analog Clock

A CSS transforms and animations clock. Javascript used to handle & manipulate classes.

Author:
Maneesh
Created:
AUGUST 02, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: Digital Analog Clock

Flat Clock and Date

CSS + Javascript flat clock and date.

Author:
Joseph Shambrook
Created:
JULY 20, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: Flat Clock and Date

Wall clock UI Design

Wall clock UI Design

Author:
Hugh Dai
Created:
DECEMBER 16, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Wall clock UI Design

Column clock

A reproduction of the column clock available for the iOS

Author:
Nelson Rodrigues
Created:
APRIL 12, 2014
Made with:
HTML, CSS and JavaScript
Demo Image: Column clock

SVG Analog Clock

SVG Analog Clock animation. The elastic easing gives the second needle that vintage effect

Author:
Benjamin
Created:
NOVEMBER 07, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: SVG Analog Clock

Flat Design Clock

Flat Design Clock with CSS3 transition.

Author:
Steven Fabre
Created:
JULY 07, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: Flat Design Clock

Text Clock

A text readable clock.

Author:
Bill Searle
Created:
MARCH 17, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: Text Clock

Clock Widget

HTML CSS SASS(SCSS) JavaScript SVG

Author:
charlie
Created:
AUGUST 01, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: Clock Widget

SVG clock UI Design

SVG based clock UI design. Animated with GSAP.

Author:
Icebob
Created:
SEPTEMBER 06, 2015
Made with:
HTML, CSS and JavaScript
Demo Image: SVG clock UI Design

Digital Glitch Clock

Glitch Clock

Author:
Constantine
Created:
NOVEMBER 04, 2014
Made with:
HTML, CSS and JavaScript
Demo Image: Digital Glitch Clock

Digital Clock with Vue.js

Digital Clock with Vue.js

Author:
Toshiyuki TAKAHASHI
Created:
AUGUST 19, 2017
Made with:
HTML, CSS and JavaScript
Demo Image: Digital Clock with Vue.js

Clock with moment.js & jquery

Clock with moment.js & jquery

Author:
Gabriel
Created:
NOVEMBER 04, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: clock with moment.js & jquery

Analog Clock with html, css & js

A pretty clock made with html, css and some javascript to get the time and update the clock.

Author:
Kyosuke
Created:
MAY 23, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: Analog Clock with html, css & js

Rotating Clock

Click the CLOCK to change the style.

Author:
Vicio Bonura
Created:
APRIL 20, 2016
Made with:
HTML, CSS and JavaScript
Demo Image: Rotating Clock

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.

Author:
Rik Schennink
Created:
JUNE 14, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: Mother Flippin Clock

Flat Clock

Inspired by MomentJS's homepage clock

Author:
Joseph Shambrook
Created:
JUNE 20, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: Flat Clock

Canvas Wall Clock w/t Night Mode

Canvas Wall Clock w/t Night Mode

Author:
Moses Holmström
Created:
JANUARY 13, 2017
Made with:
HTML, CSS and JavaScript
Demo Image: Canvas Wall Clock w/t Night Mode

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.

Author:
Yogev Ahuvia
Created:
SEPTEMBER 09, 2013
Made with:
HTML, CSS
Demo Image: CSS-Only Countdown Clock

Animated Pure CSS Clock

Animated Pure CSS Clock

Author:
Max
Created:
SEPTEMBER 16, 2013
Made with:
HTML, CSS
Demo Image: Animated Pure CSS Clock

Javascript Digital Clock Example

A simple digital clock.

Author:
Cory
Created:
AUGUST 14, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: Javascript Digital Clock Example

CSS3 Working Clock

Working CSS3 analog clock, using CSS animations and shapes, without any images or JavaScript.

Author:
Ilia
Created:
FEBRUARY 08, 2013
Made with:
HTML, CSS
Demo Image: CSS3 Working Clock

HTML 5 Canvas Polar Clock

HTML 5 Canvas Polar Clock

Author:
Lennart Hase
Created:
AUGUST 29, 2013
Made with:
HTML, CSS and JavaScript
Demo Image: HTML 5 Canvas Polar Clock

Advertisement