25+ CSS Watches

Discover an eye-catching collection of 25+ HTML and CSS watch code examples. Each watch UI is unique, stylish and open-source.

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