60+ Fantastic CSS Clocks (Free Demo + Code)

Day 2 of #JavaScript30! A clock made with JavaScript and CSS, working with your device's internal time.

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

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

colors by https://codepen.io/ilithya/pen/mqXpWP 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.

CSS only, minimalist clock

Switch from White to Black theme.

inspired from Black [ DD ] theme

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

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, and 🤘🏼 The dial was built off of this dribbble shot with minor tweaks: https://dribbble.com/shots/2196737-Day-048-S...

Read More

Day 2 of #JavaScript30! A clock made with JavaScript and CSS, working with your device's internal time.

Switch from White to Black theme.

Inspired by this shot: https://dribbble.com/shots/2236793-Vintage-Flip-Clock I decided to add a radio button because I love any excuse to use some old timey radio Uses http://avondaletypeco.com fonts

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

Simulation of simple analog clock in HTML with audio.

Simulation of simple analog clock in HTML with audio.

Click the CLOCK to change the style.

A clock made whith canvas javascript. Looks like a Hacker The code were based on this tutorial (isn't mine) https://www.youtube.com/watch?v=9dtDaWi6R0g

Simulation of simple analog clock in HTML with audio.

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

A recreation of a dribbble shot designed by Zaib Ali. I took his dribbble shot and mimic it in code and made it function like an actual clock.

SVG based clock UI design. Animated with GSAP.

studies on Snap SVG

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

Braun clock created in pure HTML and CSS for fun. Best rendered in Google Chrome. Still working out small visual bugs.

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.

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

Inspired by: http://dribbble.com/shots/1015985-Clock

Working CSS3 analog clock, using CSS animations and shapes, without any images or JavaScript. This is now available on GitHub @ https://github.com/iliadraznin/CSS3clock

A CSS only experiment based on this: http://goo.gl/49JZdd The exported code makes me cringe, but eh... has a nice effect. Known bugs: - need a way to define the delay of the animation based on the unit (so the min triggers later than seconds).

recreating the function of this watch doesn't work on FF

recreating the function of this watch doesn't work on FF

A countdown clock that is powered only by CSS. The countdown length is 1 hour and it shows minutes, seconds and the hundredths of seconds as they tick.

Pure CSS Animated Clock experiment.

Just messing around. Long shadow mixin thrown onto a clock *the clock is one second off... :(

Analog clock with single div and CSS

There's a lot on here, but this one's different

Footage of me sleeping in past my 7am alarm, reimagined in CSS!

Been meaning to create a cat-related pen since kittens moved in at home 😅 Here's a CSS Kit Kat clock where JavaScript is used to set the time and change bowtie color on each load 😎 Powered by CSS variables! 💪 Inspired by this Dribbble shot. Enjoy!

Pure CSS Clock/Phone

Created a Neon clock display that has a randomized flicker effect using HTML, CSS and vanilla JS