TOP 41 CSS Clocks

CLOCK

Really clean and asthetic looking clock.

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

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.

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.

3D CLOCK

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

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

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.

CSS CLOCK

Pure CSS clock design.

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

JS AND CSS CLOCK

JS and CSS clock with sound.

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

TYPOGRAPHIC CLOCK

Very cool typographic clock.

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

CLOCK

Very nice clock in HTML, CSS and JavaScript.

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

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.

DIGITAL CLOCK

Digital clock with Vue.js.

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

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.

ANALOG DIGITAL CLOCK

Analog/Digital clock with HTML, CSS and JS.

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

SLIDE CLOCK

HTML and CSS slide clock with little JS.

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

CANVASCLOCK

Clock with HTML5 canvas and CSS3.

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

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.

CLOCKS

Clocks with three different time-zones.

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

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.

CSS CLOCK

Realistic minimal HTML and CSS clock.

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

ANALOG CLOCK

Simple analog clock with HTML/CSS/JS.

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

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.

Clock

A sweet little clock.

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

Clock

HTLM, CSS and JavaScript clock.

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

Sweet Analog Clock

Simulation of simple analog clock in HTML with audio.

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

Animated Clock

HTML, CSS and JavaScript animated clock.

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

Rotating Clock

Click the CLOCK to change the style.

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

Canvas Clock

A clock made whith canvas Javascript.

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

Cube Clock

Cube clock in HTML, CSS and JavaScript.

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

Analog Clock

A simple clock made with JS and CSS.

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

Pie Time

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

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

Clock

A recreation of a dribbble shot designed by Zaib Ali.

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

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.

SVG Clock UI

SVG based clock UI design. Animated with GSAP.

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

Clock Snap

Clock snap with HTML, CSS and JavaScript.

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

Clock 3D

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

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

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.

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.

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.

Glitch Clock

Glitch clock with HTML, CSS and JavaScript.

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

DIGITAL CLOCK

Digital clock switch from white to black theme.

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

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.