A CSS-only countdown.
No JavaScript needed.
This countdown from 10 to 0 is 100% CSS.
Here’s how it works:
1 - @property lets us define a custom CSS variable (—c) and can be animated.
2 - We animate —c from 10 to 0 using a @keyframes animation.
3 - Inside a ::after pseudo-element, we use counter-reset to bind —c to a named CSS counter (count).
4 - Finally, we display the live-updating value using content: counter(...).
No JavaScript. No setInterval. No updating the DOM.
Just clever use of CSS features that are finally starting to mature.
Browser support is pretty good with more than 92%
Here’s a video presenting a countup in action:
A CSS countdown is great for decorative timers and launch moments where strict time sync is not required. Keep it presentational, and pair it with semantic text when users need precise timing information.
CSS countdowns are ideal for decorative timers and promo moments where exact clock sync is not critical. Pair visual countdowns with explicit text when users need precise timing.
Validate it with real content and realistic viewport ranges so implementation details hold up outside demos.
If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.
Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!