Hand-Picked HTML and CSS Neumorphism Code Examples

Explore a curated selection of hand-picked free HTML and CSS Neumorphism code examples to create modern, soft, and interactive UI designs for your website.

Neumorphic Shadows

Neumorphic Shadows

Author:
Oscar-Jite | January 24, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Neumorphic Fitbit UI

Neumorphic Fitbit UI

Author:
Jon Kantner | January 11, 2022
Made with:
HTML / CSS

About a code

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:
-

Dark Neumorphism Circle Loader

Author:
Robbe Huybrechts | October 10, 2021
Made with:
HTML / CSS / JS

About a code

Circular loading with a gradient in a dark neumorphism theme.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Neumorphism On Off

Author:
Arslan Khan | September 19, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Neumorphic Brick Phone

Author:
Jon Kantner | June 4, 2021
Made with:
HTML / CSS / JS

About a code

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:
-
Neumorphic Shapes (Mixin Included)

Neumorphic Shapes (Mixin Included)

Author:
Yoav Kadosh | March 8, 2021
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Creative CSS Animation Effects CSS3 Neumorphism

Creative CSS Animation Effects CSS3 Neumorphism

Author:
samuel garcia | January 27, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Neumorphic Form

Neumorphic Form

Author:
Pratham | January 2, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Neumorphism: The CSS Way

Neumorphism: The CSS Way

Author:
Shounak Das | December 13, 2020
Made with:
HTML / CSS (SCSS)

About a code

A simple demonstration of the basics of Neumorphism.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Glassmorphism

Glassmorphism

Author:
Albert | November 23, 2020
Made with:
HTML / CSS

About a code

A simple example of glassmorphism design trend in pure CSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Basic Neumorphism Card Style Success + Lottie

Author:
Fernando Cohen | November 19, 2020
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
lottie-player.js

Neumorphic Flip Toggle

Author:
Chris Gannon | October 21, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
gsap.js, flip.js

Neumorphic Loading Animation

Author:
Ruphaa Ganesh | October 16, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Neumorphism - Wave Animation

Author:
Guilmain Dorian | September 19, 2020
Made with:
HTML (Pug) / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Javascript Clock

Javascript Clock

Author:
samuel garcia | September 12, 2020
Made with:
HTML / CSS / JS

About a code

CSS neumorphism working analog clock UI design.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Toggle Button with Soft UI

Author:
Kunal Panchal | September 1, 2020
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Neumorphic UI - Toggle

Author:
Animesh Kumar | August 26, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Neumorphic Components

Author:
Natalie Frecka | August 11, 2020
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Neumorphic Buttons

Author:
Yuhomyan | July 27, 2020
Made with:
HTML / CSS

About a code

Hover us and enjoy the satisfying neumorphic animation designs!

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Neumorphism Social Share Button

Neumorphism Social Share Button

Author:
Yuhomyan | July 16, 2020
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
font-awesome.css

Full CSS Neumorphic Joystick

Author:
Vincent Durand | July 15, 2020
Made with:
HTML (Haml) / CSS (SCSS)

About a code

You can use the TAB key.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Neumorphic Calculator

Neumorphic Calculator

Author:
Lily Khan | July 15, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Neumorphism Play Button

Author:
Yuhomyan | July 20, 2020
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css
Lexon Tykho 3

Lexon Tykho 3

Author:
Chris Ota | May 25, 2020
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Neumorphism Login Form

Author:
Ricardo Oliva Alonso | May 8, 2020
Made with:
HTML (Pug) / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨