w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Media

43 Hand-Picked CSS Clocks

September 25, 2019
in Media

Collection of free Hand-picked HTML and CSS clocks: analog, digital, flip, animated and etc. Listed tutorials well played with 3d, gradients, etc. Some of the CSS Clocks are having beautiful animation effects using transitions. Demo and download available on each tutorial. CSS Clocks can be used directly without any changes and could be small changes based on your needs. Article will be helpful for designers and non-coders.

You might also like

Animated Fullscreen and grid view Slider

Unicycle Range Slider

15 CSS Sliders

10 CSS Logo Designs

CSS Advent Calendar

HTML Audio Player

1) CSS Variable-Powered Clock

CSS Variable-Powered Clock
Demo Image: CSS Variable-Powered Clock

CSS Variable-Powered Clock

Tutorial/codes – Demo

Author:
Emily Hayman
Created:
NOVEMBER 08, 2016
Made with:
HTML, CSS and JavaScript

2) Minimalist Clock, Pure CSS with current time

Minimalist Clock, Pure CSS with current time
Demo Image: Minimalist Clock, Pure CSS with current time

CSS only, minimalist clock

Tutorial/codes – Demo

Author:
Kyle Wetton
Created:
NOVEMBER 06, 2018
Made with:
HTML, CSS and JavaScript

3) SVG Clock

SVG Clock
Demo Image: SVG Clock

A clock made with SVG which shows current time and uses SVG’s animation functionality.

Tutorial/codes – Demo

Author:
Mohamad Mohebifar
Created:
DECEMBER 03, 2014
Made with:
HTML, CSS and JavaScript

4) Pure CSS Animated Clock

Pure CSS Animated Clock
Demo Image: Pure CSS Animated Clock

Pure CSS Animated Clock experiment.

Tutorial/codes – Demo

Author:
Jay Salvat
Created:
OCTOBER 13, 2014
Made with:
HTML, CSS and JavaScript

5) ATC Vintage Radio Flip Clock

ATC Vintage Radio Flip Clock
Demo Image: ATC Vintage Radio Flip Clock

ATC Vintage Radio Flip Clock

Tutorial/codes – Demo

Author:
Tiffany Stoik
Created:
SEPTEMBER 10, 2015
Made with:
HTML, CSS and JavaScript

6) Pomodoro Clock Design

Pomodoro Clock Design
Demo Image: Pomodoro Clock Design

Pomodoro Clock Design

Tutorial/codes – Demo

Author:
Putra Aryotama
Created:
JANUARY 01, 2017
Made with:
HTML, CSS and JavaScript

7) Analog binary clock

Analog binary clock
Demo Image: Analog binary clock

analog binary clock

Tutorial/codes – Demo

Author:
Alex Taietti
Created:
MAY 16, 2017
Made with:
HTML, CSS and JavaScript

8) Flat design clock

Flat design clock
Demo Image: Flat design clock

Flat design working clock

Tutorial/codes – Demo

Author:
Fabrika World
Created:
FEBRUARY 18, 2015
Made with:
HTML, CSS and JavaScript

9) 3d Flip Clock

3d Flip Clock
Demo Image: 3d Flip Clock

A 3d Flip Clock using CSS transforms and transitions and a little JS to get things going.

Tutorial/codes – Demo

Author:
Gerwin van Royen
Created:
NOVEMBER 15, 2012
Made with:
HTML, CSS and JavaScript

10) Pure HTML and CSS Braun Clock

Pure HTML and CSS Braun Clock
Demo Image: 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.

Tutorial/codes – Demo

Author:
Chris Ota
Created:
DECEMBER 24, 2014
Made with:
HTML, CSS and JavaScript

11) Rotate Clock [CSS Only]

Rotate Clock [CSS Only]
Demo Image: Rotate Clock [CSS Only]

Rotate clock written in CSS3 only

Tutorial/codes – Demo

Author:
Dawid Krajewski
Created:
DECEMBER 23, 2014
Made with:
HTML, CSS

12) Animated Digital LED Clock

Animated Digital LED Clock
Demo Image: Animated Digital LED Clock

A clock made of traditional 7 segment LEDs, animated with CSS and JS

Tutorial/codes – Demo

Author:
Collin
Created:
JUNE 09, 2015
Made with:
HTML, CSS and JavaScript

13) jQuery Wall Clock

jQuery Wall Clock
Demo Image: jQuery Wall Clock

jQuery Wall Clock

Tutorial/codes – Demo

Author:
Matt Litzinger
Created:
MARCH 25, 2014
Made with:
HTML, CSS and JavaScript

14) Clock with html css and javascript

Clock with html css and javascript
Demo Image: Clock with html css and javascript

Clock code and made it function like an actual clock.

Tutorial/codes – Demo

Author:
Fabian D
Created:
OCTOBER 16, 2013
Made with:
HTML, CSS and JavaScript

15) Clocks and Calendars

Clocks and Calendars
Demo Image: Clocks and Calendars

Clocks and Calendars

Tutorial/codes – Demo

Author:
Justin
Created:
APRIL 17, 2015
Made with:
HTML, CSS and JavaScript

16) Ticking Clock

Ticking Clock
Demo Image: Ticking Clock

Clock function that updates every second

Tutorial/codes – Demo

Author:
Eduard Fastovski
Created:
MARCH 20, 2014
Made with:
HTML, CSS and JavaScript

17) Clock rebound

Clock rebound
Demo Image: Clock rebound

CSS Clock rebound

Tutorial/codes – Demo

Author:
Lionel T
Created:
SEPTEMBER 13, 2013
Made with:
HTML, CSS and JavaScript

18) App Icon – Clock

App Icon - Clock
Demo Image: App Icon – Clock

App Icon – Clock

Tutorial/codes – Demo

Author:
nicolazj
Created:
JANUARY 26, 2015
Made with:
HTML, CSS and JavaScript

19) Animated clock (Pure CSS)

Animated clock (Pure CSS)
Demo Image: Animated clock (Pure CSS)

CSS-only animated clock. No JavaScript, canvas, SVG, images etc.

Tutorial/codes – Demo

Author:
Jan
Created:
APRIL 24, 2014
Made with:
HTML, CSS

20) Pomodoro Clock

Pomodoro Clock
Demo Image: Pomodoro Clock

Pomodoro Clock

Tutorial/codes – Demo

Author:
Joe Weaver
Created:
JANUARY 27, 2018
Made with:
HTML, CSS and JavaScript

21) CSS only clock of clocks

CSS only clock of clocks
Demo Image: CSS only clock of clocks

CSS only clock of clocks

Tutorial/codes – Demo

Author:
Razvan Spatariu
Created:
SEPTEMBER 21, 2015
Made with:
HTML, CSS

22) Digital Analog Clock

Digital Analog Clock
Demo Image: Digital Analog Clock

A CSS transforms and animations clock. Javascript used to handle & manipulate classes.

Tutorial/codes – Demo

Author:
Maneesh
Created:
AUGUST 02, 2016
Made with:
HTML, CSS and JavaScript

23) Flat Clock and Date

Flat Clock and Date
Demo Image: Flat Clock and Date

CSS + Javascript flat clock and date.

Tutorial/codes – Demo

Author:
Joseph Shambrook
Created:
JULY 20, 2013
Made with:
HTML, CSS and JavaScript

24) Wall clock UI Design

Wall clock UI Design
Demo Image: Wall clock UI Design

Wall clock UI Design

Tutorial/codes – Demo

Author:
Hugh Dai
Created:
DECEMBER 16, 2015
Made with:
HTML, CSS and JavaScript

25) Column clock

Column clock
Demo Image: Column clock

A reproduction of the column clock available for the iOS

Tutorial/codes – Demo

Author:
Nelson Rodrigues
Created:
APRIL 12, 2014
Made with:
HTML, CSS and JavaScript

26) SVG Analog Clock

SVG Analog Clock
Demo Image: SVG Analog Clock

SVG Analog Clock animation. The elastic easing gives the second needle that vintage effect

Tutorial/codes – Demo

Author:
Benjamin
Created:
NOVEMBER 07, 2013
Made with:
HTML, CSS and JavaScript

27) Flat Design Clock

Flat Design Clock
Demo Image: Flat Design Clock

Flat Design Clock with CSS3 transition.

Tutorial/codes – Demo

Author:
Steven Fabre
Created:
JULY 07, 2013
Made with:
HTML, CSS and JavaScript

28) Text Clock

Text Clock
Demo Image: Text Clock

A text readable clock.

Tutorial/codes – Demo

Author:
Bill Searle
Created:
MARCH 17, 2015
Made with:
HTML, CSS and JavaScript

29) Clock Widget

Clock Widget
Demo Image: Clock Widget

HTML CSS SASS(SCSS) JavaScript SVG

Tutorial/codes – Demo

Author:
charlie
Created:
AUGUST 01, 2013
Made with:
HTML, CSS and JavaScript

30) SVG clock UI Design

SVG clock UI Design
Demo Image: SVG clock UI Design

SVG based clock UI design. Animated with GSAP.

Tutorial/codes – Demo

Author:
Icebob
Created:
SEPTEMBER 06, 2015
Made with:
HTML, CSS and JavaScript

31) Digital Glitch Clock

Digital Glitch Clock
Demo Image: Digital Glitch Clock

Glitch Clock

Tutorial/codes – Demo

Author:
Constantine
Created:
NOVEMBER 04, 2014
Made with:
HTML, CSS and JavaScript

32) Digital Clock with Vue.js

Digital Clock with Vue.js
Demo Image: Digital Clock with Vue.js

Digital Clock with Vue.js

Tutorial/codes – Demo

Author:
Toshiyuki TAKAHASHI
Created:
AUGUST 19, 2017
Made with:
HTML, CSS and JavaScript

33) Clock with moment.js & jquery

clock with moment.js & jquery
Demo Image: clock with moment.js & jquery

Clock with moment.js & jquery

Tutorial/codes – Demo

Author:
Gabriel
Created:
NOVEMBER 04, 2013
Made with:
HTML, CSS and JavaScript

34) Analog Clock with html, css & js

Analog Clock with html, css & js
Demo Image: Analog Clock with html, css & js

A pretty clock made with html, css and some javascript to get the time and update the clock.

Tutorial/codes – Demo

Author:
Kyosuke
Created:
MAY 23, 2016
Made with:
HTML, CSS and JavaScript

35) Rotating Clock

Rotating Clock
Demo Image: Rotating Clock

Click the CLOCK to change the style.

Tutorial/codes – Demo

Author:
Vicio Bonura
Created:
APRIL 20, 2016
Made with:
HTML, CSS and JavaScript

36) Mother Flippin Clock

Mother Flippin Clock
Demo Image: Mother Flippin Clock

A flip clock, you could easily add other animations by adjusting the CSS. Not supported on browsers that don’t support animation of pseudo elements. Apparently this no longer works on Chrome.

Tutorial/codes – Demo

Author:
Rik Schennink
Created:
JUNE 14, 2013
Made with:
HTML, CSS and JavaScript

37) Flat Clock

Flat Clock
Demo Image: Flat Clock

Inspired by MomentJS’s homepage clock

Tutorial/codes – Demo

Author:
Joseph Shambrook
Created:
JUNE 20, 2013
Made with:
HTML, CSS and JavaScript

38) Canvas Wall Clock w/t Night Mode

Canvas Wall Clock w/t Night Mode
Demo Image: Canvas Wall Clock w/t Night Mode

Canvas Wall Clock w/t Night Mode

Tutorial/codes – Demo

Author:
Moses Holmström
Created:
JANUARY 13, 2017
Made with:
HTML, CSS and JavaScript

39) CSS Only Countdown Clock

CSS-Only Countdown Clock
Demo Image: CSS-Only Countdown Clock

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.

Tutorial/codes – Demo

Author:
Yogev Ahuvia
Created:
SEPTEMBER 09, 2013
Made with:
HTML, CSS

40) Animated Pure CSS Clock

Animated Pure CSS Clock
Demo Image: Animated Pure CSS Clock

Animated Pure CSS Clock

Tutorial/codes – Demo

Author:
Max
Created:
SEPTEMBER 16, 2013
Made with:
HTML, CSS

41) Javascript Digital Clock Example

Javascript Digital Clock Example
Demo Image: Javascript Digital Clock Example

A simple digital clock.

Tutorial/codes – Demo

Author:
Cory
Created:
AUGUST 14, 2013
Made with:
HTML, CSS and JavaScript

42) CSS3 Working Clock

CSS3 Working Clock
Demo Image: CSS3 Working Clock

Working CSS3 analog clock, using CSS animations and shapes, without any images or JavaScript.

Tutorial/codes – Demo

Author:
Ilia
Created:
FEBRUARY 08, 2013
Made with:
HTML, CSS

43) HTML 5 Canvas Polar Clock

HTML 5 Canvas Polar Clock
Demo Image: HTML 5 Canvas Polar Clock

HTML 5 Canvas Polar Clock

Tutorial/codes – Demo

Author:
Lennart Hase
Created:
AUGUST 29, 2013
Made with:
HTML, CSS and JavaScript
Tags: animatedclocksCSScss clocksdigitalflip
Previous Post

56 Hand Picked CSS Loaders

Next Post

67 CSS Gallery

Related Stories

Animated Fullscreen and grid view Slider
Media

Animated Fullscreen and grid view Slider

July 8, 2020
Unicycle Range Slider
Media

Unicycle Range Slider

July 7, 2020
CSS Sliders
Media

15 CSS Sliders

June 27, 2020
10 CSS Logo Designs
Media

10 CSS Logo Designs

May 11, 2020
CSS Advent Calendar
Media

CSS Advent Calendar

December 24, 2019
HTML Audio Player
Media

HTML Audio Player

December 10, 2019
Realistic 3D Photo Card Gallery
Media

Realistic 3D Photo Card Gallery

November 27, 2019
49 CSS Tables
Media

49 CSS Tables

November 13, 2019

Discussion about this post

Follow Us

Popular Posts

100 Creative CSS Cards

44 Free Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

49 CSS Tables

20 HTML & CSS pricing tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

55 Useful handpicked CSS Buttons with examples and demos

89 Best CSS Toggle Switches

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools