20 CSS Clocks

March 18, 2017 | by Vladimir Stepura

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

Demo Image: Digital Clock 3D
Demo Image: Digital Clock 3D

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

Demo Image: Clock
Demo Image: Clock

Clock

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

Demo Image: Clock
Demo Image: Clock

Clock

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

Demo Image: Sweet Analog Clock
Demo Image: Sweet Analog Clock

Sweet Analog Clock

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

Demo Image: Animated Clock
Demo Image: Animated Clock

Animated Clock

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

Demo Image: Rotating Clock
Demo Image: Rotating Clock

Rotating Clock

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

Demo Image: Canvas Clock
Demo Image: Canvas Clock

Canvas Clock

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

Demo Image: Cube Clock
Demo Image: Cube Clock

Cube Clock

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

Demo Image: Analog Clock
Demo Image: Analog Clock

Analog Clock

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

Demo Image: Pie Time
Demo Image: Pie Time

Pie Time

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

Demo Image: Clock
Demo Image: Clock

Clock

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

Demo Image: SVG Clock UI
Demo Image: SVG Clock UI

SVG Clock UI

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

Demo Image: Clock Snap
Demo Image: Clock Snap

Clock Snap

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

Demo Image: Clock 3D
Demo Image: Clock 3D

Clock 3D

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

Demo Image: Pure HTML And CSS Braun Clock
Demo Image: Pure HTML And CSS Braun 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.
Made by Chris Ota
July 15, 2015

Demo Image: Apple Watch Clock
Demo Image: Apple Watch Clock

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

Demo Image: Flip Clock with CSS / Javascript
Demo Image: Flip Clock with CSS / Javascript

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

Demo Image: The QLOCKTWO In HTML5, CSS And Javascript
Demo Image: The QLOCKTWO In HTML5, CSS And Javascript

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

Demo Image: Glitch Clock
Demo Image: Glitch Clock

Glitch Clock

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

Demo Image: Two Timer
Demo Image: Two Timer

Two Timer

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

FreeFrontend © 2016 - 2017

Back to top