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

Demo image: Pure CSS Calculator

Author

  • gambhirsharma

Made with

  • HTML / CSS

About a code

Pure CSS Calculator

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

Responsive: no

Dependencies: -

Demo image: Glassmorphism Calculator UI

Author

  • Tirso Lecointere

Made with

  • HTML / CSS (SCSS) / JS

About a code

Glassmorphism Calculator UI

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

Responsive: no

Dependencies: -

Demo image: Pure CSS Calculator

Author

  • vrugtehagel

Made with

  • HTML / CSS

About a code

Pure CSS Calculator

It's a mix of using CSS variables, a fitting HTML structure with over 80 checkboxes and labels, calc() for the math, and CSS counters to output things. Have a look at the source code! I promise, there's absolutely zero JavaScript.

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

Responsive: yes

Dependencies: -

Demo image: Casio FX-702P

Author

  • William Jawad

Made with

  • HTML / CSS

About a code

Casio FX-702P

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

Responsive: no

Dependencies: -

Demo image: fx-82MS Scientific Calculator

Author

  • shreyasminocha

Made with

  • HTML / CSS

About a code

fx-82MS Scientific Calculator

fx-82MS scientific calculator in HTML and CSS.

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

Responsive: no

Dependencies: -

Demo image: Calculator

Author

  • Varun A P

Made with

  • HTML / CSS (SCSS)

About a code

Calculator

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

Responsive: no

Dependencies: -

Demo image: Calculator

Author

  • magnificode

Made with

  • HTML / CSS (SCSS)

About a code

Calculator

Calculator...so soft, so cool.

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

Responsive: no

Dependencies: -

Demo image: PureCalc

Author

  • Kalpesh Singh

Made with

  • HTML / CSS / JS

About a code

PureCalc

Simple calculator using HTML and CSS.

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

Responsive: no

Dependencies: -