Collection of free HTML and CSS Neumorphism code examples from Codepen, GitHub and other resources. Update of April 2021 collection. 24 new items.

Related Articles

  1. CSS Glassmorphism
Demo image: Neumorphic Shadows

Author

  • Oscar-Jite

Made with

  • HTML / CSS

About a code

Neumorphic Shadows

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

Responsive: no

Dependencies: -

Demo image: Neumorphic Fitbit UI

Author

  • Jon Kantner

Made with

  • HTML / CSS

About a code

Neumorphic Fitbit UI

The design of the main Fitbit screen (as of January 2022) given a neumorphic makeover.

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

Responsive: no

Dependencies: -

Author

  • Robbe Huybrechts

Made with

  • HTML / CSS / JS

About a code

Dark Neumorphism Circle Loader

Circular loading with a gradient in a dark neumorphism theme.

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

Responsive: no

Dependencies: -

Author

  • Arslan Khan

Made with

  • HTML / CSS

About a code

Neumorphism On Off

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Jon Kantner

Made with

  • HTML / CSS / JS

About a code

Neumorphic Brick Phone

What ol’ brick phones may look like if we apply neumorphism to it. Also partially operable but no real calls.

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

Responsive: yes

Dependencies: -

Demo image: Neumorphic Shapes (Mixin Included)

Author

  • Yoav Kadosh

Made with

  • HTML / CSS (SCSS)

About a code

Neumorphic Shapes (Mixin Included)

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

Responsive: no

Dependencies: -

Demo image: Creative CSS Animation Effects CSS3 Neumorphism

Author

  • samuel garcia

Made with

  • HTML / CSS

About a code

Creative CSS Animation Effects CSS3 Neumorphism

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

Responsive: no

Dependencies: -

Demo image: Neumorphic Form

Author

  • Pratham

Made with

  • HTML / CSS

About a code

Neumorphic Form

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

Responsive: yes

Dependencies: -

Demo image: Neumorphism: The CSS Way

Author

  • Shounak Das

Made with

  • HTML / CSS (SCSS)

About a code

Neumorphism: The CSS Way

A simple demonstration of the basics of Neumorphism.

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

Responsive: no

Dependencies: -

Demo image: Glassmorphism

Author

  • Albert

Made with

  • HTML / CSS

About a code

Glassmorphism

A simple example of glassmorphism design trend in pure CSS.

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

Responsive: no

Dependencies: -

Author

  • Fernando Cohen

Made with

  • HTML / CSS (SCSS) / JS

About a code

Basic Neumorphism Card Style Success + Lottie

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

Responsive: yes

Dependencies: lottie-player.js

Author

  • Chris Gannon

Made with

  • HTML / CSS / JS

About a code

Neumorphic Flip Toggle

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

Responsive: yes

Dependencies: gsap.js, flip.js

Author

  • Ruphaa Ganesh

Made with

  • HTML / CSS / JS

About a code

Neumorphic Loading Animation

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

Responsive: no

Dependencies: -

Author

  • Guilmain Dorian

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Neumorphism - Wave Animation

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

Responsive: yes

Dependencies: -

Demo image: Javascript Clock

Author

  • samuel garcia

Made with

  • HTML / CSS / JS

About a code

Javascript Clock

CSS neumorphism working analog clock UI design.

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

Responsive: no

Dependencies: -

Author

  • Kunal Panchal

Made with

  • HTML / CSS (SCSS) / JS

About a code

Toggle Button with Soft UI

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Animesh Kumar

Made with

  • HTML / CSS / JS

About a code

Neumorphic UI - Toggle

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Natalie Frecka

Made with

  • HTML / CSS

About a code

Neumorphic Components

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

Responsive: no

Dependencies: -

Author

  • Yuhomyan

Made with

  • HTML / CSS

About a code

Neumorphic Buttons

Hover us and enjoy the satisfying neumorphic animation designs!

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

Responsive: yes

Dependencies: -

Demo image: Neumorphism Social Share Button

Author

  • Yuhomyan

Made with

  • HTML / CSS

About a code

Neumorphism Social Share Button

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Vincent Durand

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Full CSS Neumorphic Joystick

You can use the TAB key.

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

Responsive: no

Dependencies: -

Demo image: Neumorphic Calculator

Author

  • Lily Khan

Made with

  • HTML / CSS / JS

About a code

Neumorphic Calculator

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

Responsive: no

Dependencies: -

Author

  • Yuhomyan

Made with

  • HTML / CSS

About a code

Neumorphism Play Button

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

Responsive: no

Dependencies: font-awesome.css

Demo image: Lexon Tykho 3

Author

  • Chris Ota

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Lexon Tykho 3

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

Responsive: no

Dependencies: -

Author

  • Ricardo Oliva Alonso

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Neumorphism Login Form

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

Responsive: yes

Dependencies: -

Author

  • Tran Dinh Trung

Made with

  • HTML / CSS (SCSS) / JS

About a code

Neumorphism Search Bar

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

Responsive: no

Dependencies: -

Author

  • Jenny Core-Holt

Made with

  • HTML / CSS (SCSS)

About a code

Fontawesome 5 Neumorphic Star Rating

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

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css

Demo image: Functional Neumorphic UI - Simple Music Player

Author

  • Hugo Priet

Made with

  • HTML / CSS (SCSS) / JS

About a code

Functional Neumorphic UI - Simple Music Player

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

Responsive: yes

Dependencies: -

Author

  • Alex Boyers

Made with

  • HTML / CSS / JS

About a code

Neumorphism Testing

Just a few little interactive design elements that implement the 'Neumorphism' trend.

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Adam Kuhn

Made with

  • HTML / CSS (SCSS)

About a code

CSS Neumorphic Toggle

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

Responsive: no

Dependencies: -

Author

  • Aniket Kudale

Made with

  • HTML / CSS / JS

About a code

Neumorphic Color Palette (With Sound)

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

Responsive: yes

Dependencies: -

Author

  • Kilian So

Made with

  • HTML / CSS

About a code

Neumorphism Waves

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

Responsive: yes

Dependencies: -

Demo image: Neumorphic Elements

Author

  • Maria M. Muñoz

Made with

  • HTML / CSS (SCSS) / JS

About a code

Neumorphic Elements

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

Responsive: no

Dependencies: -

Demo image: Neumorphic Dominoes

Author

  • P

Made with

  • HTML / CSS

About a code

Neumorphic Dominoes

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

Responsive: no

Dependencies: -

Author

  • Aniket Kudale

Made with

  • HTML / CSS / JS

About a code

Neumorphic Bubbles

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

Responsive: yes

Dependencies: -

Author

  • Shinobis

Made with

  • HTML / CSS / JS

About a code

Simple & Minimal Neumorphic Buttons

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

Responsive: no

Dependencies: -

Author

  • jakob-e

Made with

  • HTML / CSS (SCSS) / JS (TypeScript)

About a code

Neumorphism Transition Using Houdini

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

Responsive: no

Dependencies: -

Author

  • Ryan Parag

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

About a code

Neumorphism and Toggles

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

Responsive: no

Dependencies: feather.js

Author

  • Braydon Coyer

Made with

  • HTML / CSS (SCSS) / JS

About a code

Neuomorphic Keyboard

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

Responsive: yes

Dependencies: -

Author

  • zeynep

Made with

  • HTML / CSS (SCSS)

About a code

Neumorphism Buttons

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

Responsive: no

Dependencies: -

Author

  • pourya

Made with

  • HTML / CSS

About a code

Neumorph

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

Responsive: no

Dependencies: -

Author

  • Wyatt Nolen

Made with

  • HTML / CSS (SCSS) / JS

About a code

Neumorphic Digital Clock

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

Responsive: no

Dependencies: -

Author

  • Braydon Coyer

Made with

  • HTML / CSS (SCSS)

About a code

Neuomorphic Checkboxes

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

Responsive: yes

Dependencies: font-awesome.css

Demo image: Neomorphic Form

Author

  • Swapnil

Made with

  • HTML / CSS (SCSS)

About a code

Neomorphic Form

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

Responsive: no

Dependencies: ionicons.css

Author

  • Damir

Made with

  • HTML / CSS / JS

About a code

A Bit of Neumorphism

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

Responsive: yes

Dependencies: bootstrap.css, jquery.js, popper.js

Author

  • Michael J. Fordham

Made with

  • HTML / CSS / JS

About a code

Neumorphism Accessibility Example

An example of how we can develop neumorphic buttons in a more accessible way. There are outlines which are above WCAG 2.1 AA contrast guidelines, and the icon changes colour to indicate when it's in a different state.

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

Responsive: no

Dependencies: -

Demo image: Neumorphism - Animated Social Icons

Author

  • Jitendra Nirnejak

Made with

  • HTML / CSS (SCSS)

About a code

Neumorphism - Animated Social Icons

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

Responsive: no

Dependencies: -

Author

  • Fernando Cohen

Made with

  • HTML / CSS (SCSS) / JS

About a code

Neumorphism Slider

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

Responsive: yes

Dependencies: slick.css, jquery.js, slick.js, gsap.js

Author

  • Angius

Made with

  • HTML / CSS (Sass)

About a code

Neumorphism

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

Responsive: no

Dependencies: -

Author

  • Tyler Scott Williams

Made with

  • HTML / CSS

About a code

Soft-UI Button Pattern

Multi button with Soft UI.

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

Responsive: no

Dependencies: -

Author

  • Cosimo Scarpa

Made with

  • HTML / CSS (SCSS) / JS

About a code

Neumorphism UI Card

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

Responsive: yes

Dependencies: feather-icons.js, jquery.js

Author

  • Cosimo Scarpa

Made with

  • HTML / CSS (SCSS) / JS

About a code

Neumorphism UI Button

Example of Neumorphism realised with SCSS.

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

Responsive: yes

Dependencies: feather.js

Author

  • Steven Brannum

Made with

  • HTML / CSS (SCSS) / JS

About a code

Payment App (Neumorphism)

A sample neumorphism (soft ui) implementation.

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

Responsive: yes

Dependencies: feather.js

Demo image: neumorph

Author

  • victor

Made with

  • HTML / CSS (SCSS)

About a code

neumorph

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

Responsive: yes

Dependencies: bootstrap.css

Demo image: Neumorphism Calculator Design

Author

  • Ifeanyi Kelvin Ossai

Made with

  • HTML / CSS

About a code

Neumorphism Calculator Design

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

Responsive: no

Dependencies: -

Demo image: Neumorphism Soft UI Music Player

Author

  • mixj93

Made with

  • HTML / CSS

About a code

Neumorphism Soft UI Music Player

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

Responsive: no

Dependencies: -

Author

  • Sebastian Piskaty

Made with

  • HTML / CSS (SCSS) / JS

About a code

Neumorphism Menu Button

A simple and easy way to do realistic looking buttons for a smooth User Experience.

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

Responsive: no

Dependencies: jquery.js

Demo image: Skeuomorphic Search Input

Author

  • Jonas Badalic

Made with

  • HTML / CSS (SCSS)

About a code

Skeuomorphic Search Input

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

Responsive: no

Dependencies: -