Collection of hand-picked free HTML and pure CSS countdown timer code examples from Codepen and other resources.

Related Articles

  1. jQuery Countdowns

Author

  • rachelmckean

Links

Made with

  • HTML / CSS

About a code

Rotating Number Countdown

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Quick Pure CSS Counter

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Amit Sheen

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS Countdown

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Raúl Suescún

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS Only Countdown

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jens Motyka

Links

Made with

  • HTML / CSS (SCSS)

About a code

Gooey CSS Countdown

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Hunor Marton Borbely

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Countdown

Countdown using generated numbers in Pug with generated animation in SCSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Alexander White

Links

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Pure CSS Countdown Timer

Uses purse CSS animations for a 60 second countdown,

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Marcos Oliveira

Links

Made with

  • HTML / CSS

About a code

CSS Countdown Numbers

Experiment creating number shapes using a single div and manipulating it using CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Nikolay Talanov

Links

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS and SVG Countdown

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Máté Végh

Links

Made with

  • HTML (Haml) / CSS (Sass)

About a code

CSS Countdown Timer

CSS countdown timer using only one div element.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • kieron wright

Links

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

CSS Countdown Timer

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • daniesy

Links

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Flat CSS-Only Countdown and Countup

No JavaScript, pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Yogev Ahuvia

Links

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • richardlazear

Links

Made with

  • HTML / CSS

About a code

Countdown

A countdown animation with HTML, CSS3 keyframes, and one image. The animation has a "ticking" hand and numbers that count down.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -