20+ CSS Neumorphism Examples - Free Code + Demos
Collection of 20+ CSS Neumorphism Examples. All items are 100% free and open-source.
1. Neumorphism - Animated Social Icons
Author: Jitendra Nirnejak (nirnejak)
Links: Source Code / Demo
Created on: January 13, 2020
Made with: HTML, SCSS
Tags: social, icons, neumorphism, 2020, skeuomorphism
2. Payment App (Neumorphism)
A sample neumorphism (soft ui) implementation. Inspiration from https://dribbble.com/shots/9133987-Payment-App.
Author: Steven Brannum (sdbrannum)
Links: Source Code / Demo
Created on: December 28, 2019
Made with: HTML, SCSS, JS
Tags: softui, soft-ui, neumorphism, trend, soft ui
3. Soft-UI Button Pattern
Multi button with Soft UI
Author: Tyler Scott Williams (ogdenstudios)
Links: Source Code / Demo
Created on: January 6, 2020
Made with: HTML, CSS
Tags: codepenchallenge, cpc-multi-button
4. Neumorphism UI // Button
Example of Neumorphism realised with SCSS'
Author: Cosimo Scarpa (coswise)
Links: Source Code / Demo
Created on: January 4, 2020
Made with: HTML, SCSS, JS
Tags: neumorphism, scss, ui, button
5. Neumorph Test
Author: victor (VictorUx)
Links: Source Code / Demo
Created on: December 27, 2019
Made with: HTML, SCSS
6. Neumorphism Calculator Design
Author: Ifeanyi Kelvin Ossai (KelvinBLAZE)
Links: Source Code / Demo
Created on: December 25, 2019
Made with: HTML, CSS, JS
7. Neumorphism Soft UI Music Player
Author: mixj93 (mixj93)
Links: Source Code / Demo, Dribbble Shot
Created on: December 23, 2019
Made with: HTML, CSS
8. Neumorphism Button
A simple and easy way to do realistic looking buttons for a smooth User Experience.
Author: Sebastian Piskaty (sebastian-piskaty)
Links: Source Code / Demo
Created on: December 23, 2019
Made with: HTML, SCSS, JS
Tags: button, box-shadow, animated, menu-button, neumorphism
9. Neomorphic Form
Author: Swapnil (swapnet)
Links: Source Code / Demo
Created on: January 28, 2020
Made with: HTML, SCSS
10. Animated Neomorphic Toggle Button In CSS
Author: halvves (halvves)
Links: Source Code / Demo
Made with: HTML, CSS
11. Neumorphic Radio
Author: halvves (halvves)
Links: Source Code / Demo
Created on: February 5, 2020
Made with: HTML, CSS
Tags: neumorphism, radio-button, ui, soft ui, neumorphic
12. Neuburger
Hamburger menu button using the trendy neumorphism design aesthetic.
Author: Jacob (HuntingHawk)
Links: Source Code / Demo
Created on: February 4, 2020
Made with: HTML, CSS, JS
Tags: cpc-lines, codepenchallenge, neumorphism, hamburger-button, hamburger
13. Clean Neomorphic Toggle
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo
Made with: HTML, SCSS
14. Web OP-1
Inspired by Neumorphism, a new trend in UI design, I've coded a web version of an OP-1 synthesizer by Teenage Engineering
Author: Līva Raita (liva_raita)
Links: Source Code / Demo
Created on: January 6, 2020
Made with: HTML, CSS
15. Neomorphic UI Box
Recreating part of this Dribbble shot: https://dribbble.com/shots/7994421-Skeuomorph-Mobile-Banking
Author: Chris Weissenberger (CAWeissen)
Links: Source Code / Demo
Made with: HTML, SCSS
16. Neumorphic Playground 😅
Decided I'd dive in deep with the Neumorphism stuff and play with different types of inputs and surfaces. Used this as an opportunity to refine some dat.gui techniques and try out the scroll-snap techniques from an article on CSS Tricks 👍 Have fun, play around with different colors and ...Read More
Author: Jhey (jh3y)
Links: Source Code / Demo
Created on: February 13, 2020
Made with: Pug, Stylus, Babel
CSS Pre-processor: Stylus
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: neumorphism, react, config, design, soft
17. Neumorphic Buttons
Exploring new neumorphism design dribble : https://dribbble.com/shots/9194664-Neumorphic-Buttons
Author: Sikriti Dakua (dev_loop)
Links: Source Code / Demo
Created on: December 30, 2019
Made with: HTML, SCSS, JS
Tags: neumorphic
18. Neumorphism Modal (Color Changer)
Author: Scott Kellum (scottkellum)
Links: Source Code / Demo
Created on: January 7, 2020
Made with: HTML, SCSS, JS
More Awesome Lists:
Share: