25+ CSS Watches

Discover an eye-catching collection of 25+ free HTML and CSS watch code examples, providing real-time time monitoring. We have collected animated CSS watches from GitHub, Codepen, and various other sources, allowing us to integrate clocks directly in modern browsers.

No matter if you’re a web developer or a UI/UX designer, you can use our curated compilation of CSS watches to ensure design integrity. We’ve carefully selected each item, providing a diverse selection of CSS watch code snippets with high level of customization options.

From sleek analog styles to futuristic digital designs, these examples will inspire your next project, each item in our compilation comes with smooth and mesmerizing animation that will captivate your users, ensuring your projects shine. So without further ado, explore the collection now and uplift your web design game!

1. Pure CSS Apple Watch 4 – For real

See the Pen <a href="https://codepen.io/equinusocio/pen/PoNYGGX"> Pure CSS Apple Watch 4 – For real</a> by Mattia Astorino (<a href="https://codepen.io/equinusocio">@equinusocio</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mattia Astorino
Source: Code / Demo
Created on: AUGUST 3, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(PostCSS)

2. Pure CSS Apple Watch

See the Pen <a href="https://codepen.io/onediv/pen/qBQrqK"> Pure CSS Apple Watch</a> by Vincent Durand (<a href="https://codepen.io/onediv">@onediv</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vincent Durand
Source: Code / Demo
Created on: SEPTEMBER 18, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

3. Watch UI Animated

See the Pen <a href="https://codepen.io/MarcMalignan/pen/GRMKPQ"> Watch UI Animated</a> by Marc Malignan (<a href="https://codepen.io/MarcMalignan">@MarcMalignan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Marc Malignan
Source: Code / Demo
Created on: JUNE 27, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

4. CSS Watch

See the Pen <a href="https://codepen.io/jessabean/pen/WNQZqe"> CSS Watch</a> by Jessica Eldredge (<a href="https://codepen.io/jessabean">@jessabean</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jessica Eldredge
Source: Code / Demo
Created on: MARCH 29, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

5. Smart watch – Clock object

See the Pen <a href="https://codepen.io/MarkBoots/pen/zYbjaoR"> Smart watch – Clock object</a> by Mark Boots (<a href="https://codepen.io/MarkBoots">@MarkBoots</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mark Boots
Source: Code / Demo
Created on: FEBRUARY 3, 2024
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

6. Apple watch like Mickey watch

See the Pen <a href="https://codepen.io/jaysalvat/pen/ogQbKB"> Apple watch like Mickey watch</a> by Jay Salvat (<a href="https://codepen.io/jaysalvat">@jaysalvat</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jay Salvat
Source: Code / Demo
Created on: MARCH 15, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML,(Slim), CSS(SCSS), JavaScript

7. CSS Patek Philippe 5170-R

See the Pen <a href="https://codepen.io/vuild/pen/xWaKqB"> CSS Patek Philippe 5170-R </a> by Vuild (<a href="https://codepen.io/vuild">@vuild</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vuild
Source: Code / Demo
Created on: APRIL 4, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

8. Working watch

See the Pen <a href="https://codepen.io/AAbro/pen/bGoRqpQ"> Working watch⌚</a> by Arnav (<a href="https://codepen.io/AAbro">@AAbro</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Arnav
Source: Code / Demo
Created on: DECEMBER 19, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. Watch

See the Pen <a href="https://codepen.io/kassandrasanch/pen/rNxGQGg"> Watch</a> by Kass (<a href="https://codepen.io/kassandrasanch">@kassandrasanch</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kass
Source: Code / Demo
Created on: JUNE 30, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

10. CSS3 Working Clock

See the Pen <a href="https://codepen.io/iliadraznin/pen/AjWWQr"> CSS3 Working Clock</a> by Ilia (<a href="https://codepen.io/iliadraznin">@iliadraznin</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ilia
Source: Code / Demo
Created on: FEBRUARY 8, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. Timepiece

See the Pen <a href="https://codepen.io/sindre/pen/rpGyjG"> Timepiece</a> by Sindre (<a href="https://codepen.io/sindre">@sindre</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sindre
Source: Code / Demo
Created on: JANUARY 5, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

12. CSS Watch

See the Pen <a href="https://codepen.io/ancoar/pen/VPNbJa"> CSS Watch</a> by Ángel Corral Arias (<a href="https://codepen.io/ancoar">@ancoar</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ángel Corral Arias
Source: Code / Demo
Created on: FEBRUARY 16, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. CSS Smart Watch

See the Pen <a href="https://codepen.io/flavio_amaral/pen/xxxRbEW"> Css Smart Watch</a> by Flávio Amaral (<a href="https://codepen.io/flavio_amaral">@flavio_amaral</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Flávio Amaral
Source: Code / Demo
Created on: OCTOBER 19, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

14. Pure CSS Watch

See the Pen <a href="https://codepen.io/jrg/pen/RwEERB"> Pure CSS Watch</a> by James Grimshaw (<a href="https://codepen.io/jrg">@jrg</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: James Grimshaw
Source: Code / Demo
Created on: SEPTEMBER 29, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

15. CSS3 Wristwatch

See the Pen <a href="https://codepen.io/TheSisb/pen/DqBqXR"> CSS3 Wristwatch</a> by Shadi (<a href="https://codepen.io/TheSisb">@TheSisb</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shadi
Source: Code / Demo
Created on: AUGUST 12, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

16. Pure CSS watch animation

See the Pen <a href="https://codepen.io/Wujek_Greg/pen/KRXYpg"> Pure CSS watch animation</a> by Grzegorz Witczak (<a href="https://codepen.io/Wujek_Greg">@Wujek_Greg</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Grzegorz Witczak
Source: Code / Demo
Created on: MAY 7, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Stylus)

17. Pure CSS Watch

See the Pen <a href="https://codepen.io/georgehastings/pen/DmvdQV"> Pure CSS Watch</a> by George Hastings (<a href="https://codepen.io/georgehastings">@georgehastings</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: George Hastings
Source: Code / Demo
Created on: DECEMBER 14, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Flat watch

See the Pen <a href="https://codepen.io/hugo/pen/kNywzb"> Flat watch</a> by Hugo Darby-Brown (<a href="https://codepen.io/hugo">@hugo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hugo Darby-Brown
Source: Code / Demo
Created on: SEPTEMBER 12, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

19. Minimal CSS Watch

See the Pen <a href="https://codepen.io/alexboffey/pen/VKYLoM"> Minimal CSS Watch</a> by Alex Boffey (<a href="https://codepen.io/alexboffey">@alexboffey</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: ALEX BOFFEY
Source: Code / Demo
Created on: SEPTEMBER 4, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript(Babel)

20. Swiss Design Watch – Pure CSS

See the Pen <a href="https://codepen.io/erenesto/pen/dybxGXw"> Swiss Design Watch – Pure CSS</a> by Eren Guldas (<a href="https://codepen.io/erenesto">@erenesto</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Eren Guldas
Source: Code / Demo
Created on: OCTOBER 2, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

21. Pure CSS Watch

See the Pen <a href="https://codepen.io/hparton/pen/GRZxxY"> Pure CSS Watch</a> by Harry Parton (<a href="https://codepen.io/hparton">@hparton</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Harry Parton
Source: Code / Demo
Created on: APRIL 17, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

22. Nearly pure CSS working watch

See the Pen <a href="https://codepen.io/jh3y/pen/RRegVO"> Nearly pure CSS working watch ⏱</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: JHEY
Source: Code / Demo
Created on: AUGUST 5, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus), JavaScript(Babel)

23. Pure CSS Watch

24. Samsung Watch Active Clone

See the Pen <a href="https://codepen.io/kandarpsolanki/pen/poegodg"> Samsung Watch Active Clone</a> by Kandarp Solanki (<a href="https://codepen.io/kandarpsolanki">@kandarpsolanki</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kandarp Solanki
Source: Code / Demo
Created on: MAY 12, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

25. “This here is a run out the clock situation”

See the Pen <a href="https://codepen.io/dariocorsi/pen/XYQMYZ"> “This here is a run out the clock situation”</a> by Dario Corsi (<a href="https://codepen.io/dariocorsi">@dariocorsi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dario Corsi
Source: Code / Demo
Created on: JULY 4, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

26. Pure CSS Watch

See the Pen <a href="https://codepen.io/ellie_html/pen/oNjJXBY"> Pure CSS Watch</a> by Ellie (<a href="https://codepen.io/ellie_html">@ellie_html</a>) on <a href="https://codepen.io">CodePen</a>. Author: Ellie
Source: Code / Demo
Created on: MAY 19, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS