Post thumbnail: 39 CSS Clocks

39 CSS Clocks

Collection of free HTML and CSS clocks: analog, digital, flip, animated and etc. Update of January 2018 collection. 5 new examples.

Demo image: CSS Clock

Author

  • Nils Rasmusson

Made with

  • HTML / CSS (PostCSS)

About the code

CSS Clock

Pure CSS clock design.

Demo image: JS and CSS Clock

Author

  • Ahmad Emran

Made with

  • HTML / CSS / JavaScript

About the code

JS and CSS Clock

JS and CSS clock with sound.

Demo image: Typographic Clock

Author

  • Peter Norton

Made with

  • HTML/Pug
  • CSS/Sass
  • JavaScript

About the code

Typographic Clock

Very cool typographic clock.

Demo image: Clock

Author

  • Jacob Foster

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript/Babel

About the code

Clock

Very nice clock in HTML, CSS and JavaScript.

Demo image: Wall Clock

Author

  • Felix De Montis

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Wall Clock

Giant clock to have as fullscreen on a screen while not using it.

Demo image: Digital Clock with Vue.js

Author

  • Toshiyuki TAKAHASHI

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel (Vue.js)

About the code

Digital Clock

Digital clock with Vue.js.

Demo image: Vue Time Comparison

Author

  • Sarah Drasner

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel (TweenMax.js, Vue.js)

About the code

Vue Time Comparison

Using the browser's native API for .toLocaleTimeString to get rid of libraries like moment.js for world time that respects daylight savings. Made with Vue, SVG, GreenSock.

Demo image: Analog Digital Clock

Author

  • Vineeth.TR

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript (jQuery.js)

About the code

Analog Digital Clock

Analog/Digital clock with HTML, CSS and JS.

Demo image: Slide Clock

Author

  • Jacob Foster

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Slide Clock

HTML and CSS slide clock with little JS.

Demo image: CanvasClock

Author

  • GaneshKumarM

Made with

  • HTML
  • CSS
  • JavaScript

About the code

CanvasClock

Clock with HTML5 canvas and CSS3.

Demo image: JS + CSS Clock

Author

  • Katherine Kato

Made with

  • HTML
  • CSS
  • JavaScript

About the code

JS + CSS Clock

A clock made with JavaScript and CSS, working with your device's internal time.

Demo image: Clocks

Author

  • Jonathan Masiello

Made with

  • HTML/Pug
  • CSS/Sass
  • JavaScript/Babel

About the code

Clocks

Clocks with three different time-zones.

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: CSS Clock

Author

  • Nathan Taylo

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

CSS Clock

Realistic minimal HTML and CSS clock.

Demo image: Analog Clock

Author

  • Vasko Petrov

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Analog Clock

Simple analog clock with HTML/CSS/JS.

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: Digital Clock

Author

  • Bubba Smith

Made with

  • HTML
  • CSS
  • JavaScript (jQuery.js)

About the code

Digital Clock

Digital clock switch from white to black theme.

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

back to top