DEV Community 👩‍💻👨‍💻

Cover image for Neomorphic Calculator 🧮 + Dark Mode 🖤

Posted on

Neomorphic Calculator 🧮 + Dark Mode 🖤


Over the past year or even more, it is difficult not to pay attention to how interest in Neomorphism is rapidly growing in web design. And indeed, it is difficult to pass by such an unusual approach in the development of interfaces. Also, many developers have been posting their work on various resources for a long time, demonstrating how using simple shadows you can create beautiful and unusual elements. So I also decided to keep up.

Alt Text

Therefore, today I would like to present to you my calculator made in the style of Neomorphism. It also has a Dark Theme, which you can launch using the switch in the upper right corner.

You can download the project from my Github repository or CodePen.

GitHub logo Kerthin / calculator-templateSait

A calculator made in the style of neomorphism.

Kerthin logo

Build Status completion Status Version
Version Size Version


The project is a working calculator made in the style of neomorphism.

Use technology.

The following technologies were used to create this project:


Software platform


Package manager



To develop the project through gulp, I used the following types of NPM plugins:

Plugin Status Description
gulp-sourcemaps gulp-sourcemaps-status Intended for generation of css source maps which will be necessary at debugging of a code.
gulp-imagemin gulp-imagemin-status Minify PNG, JPEG, GIF and SVG images with imagemin
gulp-autoprefixer gulp-autoprefixer-status Prefix CSS with Autoprefixer
imagemin-pngquant imagemin-pngquant-status
Pngquant imagemin plugin
gulp-uglify gulp-uglify-status Minify JavaScript with UglifyJS3.
gulp-rigger gulp-rigger-status
Rigger is a build time include engine for Javascript, CSS, CoffeeScript.
gulp-minify-css gulp-minify-css-status
Gulp plugin to minify CSS
rimraf rimraf-status The UNIX command rm -rf for node.
gulp-watch gulp-watch-status File watcher that uses super-fast chokidar and emits vinyl objects.
gulp-pug gulp-pug-status This Gulp plugin enables you to compile your Pug templates into HTML or JS.

Full Page Demo

Alt Text

Dark Mode

Alt Text


(See in the format 0.5x)


Alt Text

The site is adapted for screen resolutions such as:
@media 414px
@media 375px
@media 320px

The End

Well, that's it. The project is very small, so there is no need to write large texts here. Thank you for paying attention to my article. Goodbye.

I can advise you to subscribe to my Twitter, I also post my works there.

After each mathematical action, press the equal sign.

Alt Text

Top comments (12)

lamka02sk profile image
lamka02sk • Edited on

This is actually one of the few use cases where neomorphism looks amazing. Good job!

kerthin profile image
Roden Author

Thank you for your high appreciation of mine .

it718 profile image
IT Solutionist, Specialist

Thanks for publishing. Very neccessarry. Great!

kerthin profile image
Roden Author

You're welcome. 🎉

nabilafzal profile image

So beautiful

kerthin profile image
Roden Author

Thanks 😊

tosimile profile image
Adeloye Ayomiposi Jeremiah


zaxwebs profile image
Zack Webster • Edited on

This is one of the best implementations I've come across, Roden.

kerthin profile image
Roden Author

Thank you for appreciating my work so highly.

kerthin profile image
Roden Author

Thanks 🎉

rachaelm profile image
Rachael Moody

So cool! I just want to reach out and push all the buttons. Lol

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.