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

Related Articles

  1. CSS Countdown Timers
  2. CSS Animated Counters
Demo image: CSS Gradient Counter List

Author

  • Mattia Astorino

Made with

  • HTML (Pug) / CSS (PostCSS)

About a code

CSS Gradient Counter List

An example of CSS counter with a fixed background gradient.

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

Responsive: yes

Dependencies: -

Author

  • Preethi Sam

Made with

  • HTML / CSS

About a code

CSS Counter Grid

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

Responsive: no

Dependencies: -

Demo image: Continuous Numbering

Author

  • George W. Park

Made with

  • HTML / CSS

About a code

Continuous Numbering

Continuous numbering of separate ordered lists with css counters.

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

Responsive: no

Dependencies: -

Demo image: CSS Counter Cards

Author

  • Dan Powell

Made with

  • HTML / CSS

About a code

CSS Counter Cards

CSS counters are a fantastic way to make ordered lists better.

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

Responsive: yes

Dependencies: -

Demo image: Chapter Index

Author

  • Johan Mouchet

Made with

  • HTML / CSS (SCSS)

About a code

Chapter Index

A short Sass function using CSS counter to generate a set of class to number chapters.

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

Responsive: yes

Dependencies: -

Demo image: CSS Counter Auto Numbered Steps

Author

  • Alex Raven

Made with

  • HTML / CSS

About a code

CSS Counter Auto Numbered Steps

Auto numbered step callouts with CSS content.

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

Responsive: yes

Dependencies: -