CLOCK

Really clean and asthetic looking clock.

See the Pen Dev Challenge, Week 3 by Joe (@dope) on CodePen.light

Author

  • Joe

Made with

  • HTML / CSS (SCSS) / JavaScript

MINIMALIST CLOCK

Minimalist clock, pure CSS with current time.

See the Pen Minimalist Clock, Pure CSS with current time by Kyle Wetton (@kylewetton) on CodePen.light

Author

  • Kyle Wetton

Made with

  • HTML / CSS (SCSS) / JavaScript

ORANGE CLOCK

So two coworkers of me talked the whole day about oranges. Later they saw a clock on a website and said to me “i bet you cant do this” so i made a orange clock for them.

See the Pen orange clock by creme (@creme) on CodePen.light

Author

  • creme

Made with

  • HTML / CSS (SCSS) / JavaScript

3D CLOCK

A 3D (looking) clock made with CSS gradients and borders.

See the Pen 3D Clock by Cassidy Williams (@cassidoo) on CodePen.light

Author

  • Cassidy Williams

Made with

  • HTML / CSS (Less) / JavaScript

CSS WATCH ANIMATION

Pure HTML and CSS watch animation. Based on dribbble shot “Swiss Watch Face Design with Artificial Intelligence by Gleb”..

See the Pen Pure CSS watch animation by Grzegorz Witczak (@Wujek_Greg) on CodePen.light

Author

  • Grzegorz Witczak

Made with

  • HTML / CSS (Stylus)

CSS CLOCK

Pure CSS clock design.

See the Pen CSS Clock by Nils Rasmusson (@nilsynils) on CodePen.light

Author

  • Nils Rasmusson

Made with

  • HTML / CSS (PostCSS)

JS AND CSS CLOCK

JS and CSS clock with sound.

See the Pen JS+CSS Clock with Sound by Ahmad Emran (@ahmadbassamemran) on CodePen.light

Author

  • Ahmad Emran

Made with

  • HTML / CSS / JavaScript

TYPOGRAPHIC CLOCK

Very cool typographic clock.

See the Pen Time Series 2: Typographic Clock by Peter Norton (@graphilla) on CodePen.light

Author

  • Peter Norton

Made with

  • HTML/Pug
  • CSS/Sass
  • JavaScript

CLOCK

Very nice clock in HTML, CSS and JavaScript.

See the Pen Clock – Coding Train / Shiffman Coding Challenge by Jacob Foster (@Alca) on CodePen.light

Author

  • Jacob Foster

Made with

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

WALL CLOCK

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

See the Pen Wall clock by Felix De Montis (@dervondenbergen) on CodePen.light

Author

  • Felix De Montis

Made with

  • HTML
  • CSS
  • JavaScript

DIGITAL CLOCK

Digital clock with Vue.js.

See the Pen Digital Clock with Vue.js by Toshiyuki TAKAHASHI (@gau) on CodePen.light

Author

  • Toshiyuki TAKAHASHI

Made with

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

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.

See the Pen Vue Time Comparison by Sarah Drasner (@sdras) on CodePen.light

Author

  • Sarah Drasner

Made with

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

ANALOG DIGITAL CLOCK

Analog/Digital clock with HTML, CSS and JS.

See the Pen Analog Digital clock by Vineeth.TR (@vineethtrv) on CodePen.light

Author

  • Vineeth.TR

Made with

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

SLIDE CLOCK

HTML and CSS slide clock with little JS.

See the Pen Slide Clock by Jacob Foster (@Alca) on CodePen.light

Author

  • Jacob Foster

Made with

  • HTML
  • CSS
  • JavaScript

CANVASCLOCK

Clock with HTML5 canvas and CSS3.

See the Pen CanvasClock by GaneshKumarM (@ganeshkumarm) on CodePen.light

Author

  • GaneshKumarM

Made with

  • HTML
  • CSS
  • JavaScript

JS + CSS CLOCK

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

See the Pen #JavaScript30 Day 2: JS + CSS Clock by Katherine Kato (@kathykato) on CodePen.light

Author

  • Katherine Kato

Made with

  • HTML
  • CSS
  • JavaScript

CLOCKS

Clocks with three different time-zones.

See the Pen Weekly Pen #1 – Clocks by Jonathan Masiello (@saturnaut) on CodePen.light

Author

  • Jonathan Masiello

Made with

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

Digital Clock 3D

An original quick pen of a 3D digital clock concept with RxJS and CSS variables for #3December.

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

Author

  • David Khourshid

Made with

  • Html / CSS / Javascript
Demo and Download

CSS CLOCK

Realistic minimal HTML and CSS clock.

See the Pen Realistic Minimal CSS Clock by Nathan Taylor (@nathantaylor) on CodePen.light

Author

  • Nathan Taylo

Made with

  • HTML (Pug) / CSS (SCSS)

ANALOG CLOCK

Simple analog clock with HTML/CSS/JS.

See the Pen Analog Clock by Vasko Petrov (@vaskopetrov) on CodePen.light

Author

  • Vasko Petrov

Made with

  • HTML
  • CSS
  • JavaScript

CSS VARIABLE-POWERED CLOCK

Design based off: https://dribbble.com/shots/2271565-Day-095-Time-is-Money

See the Pen CSS Variable-Powered Clock by Emily Hayman (@eehayman) on CodePen.light

Author

  • Emily Hayman

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

Clock

A sweet little clock.

See the Pen React DailyUI – 014 – Timer by Jack Oliver (@studiojvla) on CodePen.light

Author

  • Jack Oliver

Made with

  • Html / CSS
Demo and Download

Clock

HTLM, CSS and JavaScript clock.

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

Author

  • Hugh Dai

Made with

  • Html / CSS /Javascript
Demo and Download

Sweet Analog Clock

Simulation of simple analog clock in HTML with audio.

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

Author

  • Monkey Raptor

Made with

  • Html / CSS
Demo and Download

Animated Clock

HTML, CSS and JavaScript animated clock.

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

Author

  • Ophelia Fournier-Laflamme

Made with

  • Html / CSS / JavaScript
Demo and Download

Rotating Clock

Click the CLOCK to change the style.

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

Author

  • Vicio Bonura

Made with

  • Html / CSS /Javascript
Demo and Download

Canvas Clock

A clock made whith canvas Javascript.

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

Author

  • Marco Antonio Aguilar Acuña

Made with

  • Html / CSS / Javascript
Demo and Download

Cube Clock

Cube clock in HTML, CSS and JavaScript.

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

Author

  • Stix

Made with

  • Html / CSS /Javascript
Demo and Download

Analog Clock

A simple clock made with JS and CSS.

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

Author

  • Nail Davlyatchin

Made with

  • CSS /Javascript
Demo and Download

Pie Time

Canvas pie chart clock with second, minute & hour progression.

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

Author

  • Tiffany Rayside

Made with

  • Html / CSS /Javascript
Demo and Download

Clock

A recreation of a dribbble shot designed by Zaib Ali.

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

Author

  • Fabian D

Made with

  • Html / CSS / Js
Demo and Download

ATC VINTAGE RADIO FLIP CLOCK

Inspired by this shot: https://dribbble.com/shots/2236793-Vintage-Flip-Clock

See the Pen ATC Vintage Radio Flip Clock by Tiffany Stoik (@tstoik) on CodePen.light

Author

  • Tiffany Stoik

Made with

  • HTML/Haml
  • CSS/SCSS
  • JavaScript

SVG Clock UI

SVG based clock UI design. Animated with GSAP.

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

Author

  • Icebob

Made with

  • Html / CSS /JS
Demo and Download

Clock Snap

Clock snap with HTML, CSS and JavaScript.

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

Author

  • Rodny Lobos

Made with

  • Html / CSS / Javascript
Demo and Download

Clock 3D

Hacked from 3D Java Clock V1.12 by Bennet Uk.

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

Author

  • Gerard Ferrandez

Made with

  • Html / CSS / Javascript
Demo and Download

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.

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

Author

  • Chris Ota

Made with

  • Html / CSS
Demo and Download

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.

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

Author

  • Malik Dellidj

Made with

  • Html / CSS / Javascript
Demo and Download

Flip Clock with CSS / Javascript

Simple flip clock that displays the current time with some basic CSS3 transitions.

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

Author

  • Paul Noble

Made with

  • Html / CSS
Demo and Download

Glitch Clock

Glitch clock with HTML, CSS and JavaScript.

See the Pen Glitch Clock by Konstantin (@fearOfCode) on CodePen.light

Author

  • Constantine

Made with

  • Html / CSS / Javascript
Demo and Download

DIGITAL CLOCK

Digital clock switch from white to black theme.

See the Pen Digital Clock by Bubba Smith (@bsmith) on CodePen.light

Author

  • Bubba Smith

Made with

  • HTML
  • CSS
  • JavaScript (jQuery.js)

Two Timer

Experiment inspired by Industrial Facility (http://goo.gl/zw7aEg). Moment.js was used for the clock.

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

Author

  • Denis

Made with

  • Html / CSS / Javascript
Demo and Download