FreeFrontend

20 CSS Clocks

March 18, 2017 | 9 Minute Read

20 Free HTML and CSS clocks. Demo and download code (*zip).

Demo Image: Digital Clock 3D
Digital Clock 3D (demo image)

Digital Clock 3D

An original quick pen of a 3D digital clock concept with RxJS and CSS variables for #3December.
Made by David Khourshid
February 7, 2017

download demo and code

See the Pen Digital Clock #3December by David Khourshid (@davidkpiano) on CodePen.

Demo Image: Clock
Clock (demo image)

Clock

A sweet little clock.
Made by Jack Oliver
September 2, 2016

download demo and code

See the Pen React DailyUI - 014 - Timer by Jack Oliver (@jackoliver) on CodePen.

Demo Image: Clock
Clock (demo image)

Clock

HTLM, CSS and JavaScript clock.
Made by Hugh Dai
July 4, 2016

download demo and code

See the Pen clock by Hugh Dai (@HughDai) on CodePen.

Demo Image: Sweet Analog Clock
Sweet Analog Clock (demo image)

Sweet Analog Clock

Simulation of simple analog clock in HTML with audio.
Made by Monkey Raptor
May 18, 2016

download demo and code

See the Pen Sweet Analog Clock by Monkey Raptor (@monkeyraptor) on CodePen.

Demo Image: Animated Clock
Animated Clock (demo image)

Animated Clock

HTML, CSS and JavaScript animated clock.
Made by Ophelia Fournier-Laflamme
May 17, 2016

download demo and code

See the Pen Animated Clock by Ophelia Fournier-Laflamme (@opheliafl) on CodePen.

Demo Image: Rotating Clock
Rotating Clock (demo image)

Rotating Clock

Click the CLOCK to change the style.
Made by Vicio Bonura
May 9, 2016

download demo and code

See the Pen Rotating Clock by Vicio Bonura (@V17h3m) on CodePen.

Demo Image: Canvas Clock
Canvas Clock (demo image)

Canvas Clock

A clock made whith canvas Javascript.
Made by Marco Antonio Aguilar Acuña
February 28, 2016

download demo and code

See the Pen Canvas Clock by Marco Antonio Aguilar Acuña (@Maku2202) on CodePen.

Demo Image: Cube Clock
Cube Clock (demo image)

Cube Clock

Cube clock in HTML, CSS and JavaScript.
Made by Stix
January 22, 2016

download demo and code

See the Pen Cube Clock by Stix (@stix) on CodePen.

Demo Image: Analog Clock
Analog Clock (demo image)

Analog Clock

A simple clock made with JS and CSS.
Made by Nail Davlyatchin
December 20, 2015

download demo and code

See the Pen Analog Clock by Nail Davlyatchin (@nDav) on CodePen.

Demo Image: Pie Time
Pie Time (demo image)

Pie Time

Canvas pie chart clock with second, minute & hour progression.
Made by Tiffany Rayside
December 13, 2015

download demo and code

See the Pen Pie Time by Tiffany Rayside (@tmrDevelops) on CodePen.

Demo Image: Clock
Clock (demo image)

Clock

A recreation of a dribbble shot designed by Zaib Ali.
Made by Fabian D
September 29, 2015

download demo and code

See the Pen Clock by Fabian D (@dnaibaf) on CodePen.

Demo Image: SVG Clock UI
SVG Clock UI (demo image)

SVG Clock UI

SVG based clock UI design. Animated with GSAP.
Made by Icebob
September 6, 2015

download demo and code

See the Pen SVG clock UI by Icebob (@icebob) on CodePen.

Demo Image: Clock Snap
Clock Snap (demo image)

Clock Snap

Clock snap with HTML, CSS and JavaScript.
Made by Rodny Lobos
August 4, 2015

download demo and code

See the Pen Clock Snap by Rodny Lobos (@rodnylobos) on CodePen.

Demo Image: Clock 3D
Clock 3D (demo image)

Clock 3D

Hacked from 3D Java Clock V1.12 by Bennet Uk.
Made by Gerard Ferrandez
July 31, 2015

download demo and code

See the Pen Clock 3D by Gerard Ferrandez (@ge1doot) on CodePen.

Demo Image: Pure HTML And CSS Braun Clock
Pure HTML And CSS Braun Clock (demo image)

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.
Made by Chris Ota
July 15, 2015

download demo and code

See the Pen Pure HTML and CSS Braun Clock by Chris Ota (@chrisota) on CodePen.

Demo Image: Apple Watch Clock
Apple Watch Clock (demo image)

Apple Watch Clock

This clock works with simple CSS animation. The JS is only used to catch the current time, and place the needles, the CSS does the rest.
Made by Malik Dellidj
June 14, 2015

download demo and code

See the Pen Apple watch Clock by Malik Dellidj (@kowlor) on CodePen.

Demo Image: Flip Clock with CSS / Javascript
Flip Clock with CSS / Javascript (demo image)

Flip Clock with CSS / Javascript

Simple flip clock that displays the current time with some basic CSS3 transitions.
Made by Paul Noble
May 9, 2015

download demo and code

See the Pen Flip Clock with CSS / Javascript by Paul Noble (@paulnoble) on CodePen.

Demo Image: The QLOCKTWO In HTML5, CSS And Javascript
The QLOCKTWO In HTML5, CSS And Javascript (demo image)

The QLOCKTWO In HTML5, CSS And Javascript

Build in pure HTML, CSS and JavaScript. No image were used. It supports five languages (english, german, french, italian and spanish) and you can change the color.
Made by Fabrice Weinberg
January 9, 2015

download demo and code
Demo Image: Glitch Clock
Glitch Clock (demo image)

Glitch Clock

Glitch clock with HTML, CSS and JavaScript.
Made by Constantine
November 30, 2014

download demo and code

See the Pen Glitch Clock by Constantine (@dats-wassup) on CodePen.

Demo Image: Two Timer
Two Timer (demo image)

Two Timer

Experiment inspired by Industrial Facility (http://goo.gl/zw7aEg). Moment.js was used for the clock.
Made by Denis
September 29, 2014

download demo and code

See the Pen Two Timer by Denis (@gridchin) on CodePen.