50+ CSS Neumorphism Examples

Last Updated on by in CSS Examples
CSS Neumorphism Examples

Are you searching for the latest collection of CSS neumorphism effects? If yes, then you are in the right place. We are very excited to show our latest hand-picked collection of free HTML and CSS neumorphism code examples that you can use for your web projects, websites, and apps. With these Neumorphism UI element examples, you can enhance your website’s aesthetic as well as give your interfaces a unique flair.

Neumorphism in user interface (UI) design is a style that combines aspects of minimalism with elements inspired by skeuomorphism. Through CSS codes, UI designers create soft shadows, extruded objects with a slightly revealed texture, and 3D textures to invoke realism, which makes your website visually appealing and aesthetically excellent.

Let’s check out our top collection of Neumorphism UI components and embrace your design skills along with your web project.

 

01. Neumorphism Search Bar

See the Pen
Neumorphism Search Bar
by Tran Dinh Trung (@tdtrung17693)
on CodePen.


Author: Tran Dinh Trung @tdtrung17693
Links: Source Code / Demo
Created on: April 19, 2020
Made with: HTML, CSS, SCSS, JS

02. Neumorphism Button – Squishy

See the Pen
Neumorphism Button – Squishy
by Ahmad Emran (@ahmadbassamemran)
on CodePen.


Author: Ahmad Emran @ahmadbassamemran
Links: Source Code / Demo
Created on: September 21, 2020
Made with: HTML, CSS

03. A Bit of Neumorphism

See the Pen
A bit of neumorphism
by Damir (@drovosek2703)
on CodePen.


Author: Damir @drovosek2703
Links: Source Code / Demo
Created on: January 24, 2020
Made with: HTML, CSS, JS

04. Gradient Loader

See the Pen
Gradient Loader
by Henry Zarza (@HenryZarza)
on CodePen.


Author: Henry Zarza @HenryZarza
Links: Source Code / Demo
Created on: September 13, 2020
Made with: HTML, CSS

05. Neumorphic Elements

See the Pen
Neumorphic Elements
by Maria Marin (@myacode)
on CodePen.


Author: Maria Marin @myacode
Links: Source Code / Demo
Created on: March 11, 2020
Made with: HTML, CSS, SCSS, JS

06. Neumorphism Play Button

See the Pen
Neumorphism Play Button
by Yuhomyan (@yuhomyan)
on CodePen.


Author: Yuhomyan @yuhomyan
Links: Source Code / Demo
Created on: July 21, 2020
Made with: HTML, CSS

07. Neumorphism – Wave Animation

See the Pen
Neumorphism – Wave Animation
by Guilmain Dorian (@Craaftx)
on CodePen.


Author: Guilmain Dorian @Craaftx
Links: Source Code / Demo
Created on: September 19, 2020
Made with: HTML(Pug), CSS, JS

08. Neumorphic Calculator

See the Pen
Neumorphic Calculator.
by Lily Khan (@Lilykhan)
on CodePen.


Author: Lily Khan @Lilykhan
Links: Source Code / Demo
Created on: July 15, 2020
Made with: HTML, CSS, JS

09. Simple & Minimal Neumorphic Buttons

See the Pen
Simple & Minimal Neumorphic Buttons
by Shinobis (@Shinobis)
on CodePen.


Author: Shinobis @Shinobis
Links: Source Code / Demo
Created on: February 25, 2020
Made with: HTML, CSS, JS

10. Glassmorphism vs Neumorphism Cards | CSS, Js & VanillaTilt

See the Pen
Glassmorphism vs Neumorphism Cards | CSS, Js & VanillaTilt
by Quentin Feret (@quentin-feret)
on CodePen.


Author: Quentin Feret @quentin-feret
Links: Source Code / Demo
Created on: December 22, 2020
Made with: HTML, CSS, JS

11. Neumorphism Calculator Design

See the Pen
Neumorphism calculator design
by Ifeanyi Kelvin Ossai (@KelvinBLAZE)
on CodePen.


Author: Ifeanyi Kelvin Ossai @KelvinBLAZE
Links: Source Code / Demo
Created on: December 25, 2019
Made with: HTML, CSS, JS

12. Neumorphism Buttons

See the Pen
Neumorphism Buttons
by zeynep (@zeynepozdem)
on CodePen.


Author: zeynep @zeynepozdem
Links: Source Code / Demo
Created on: February 02, 2020
Made with: HTML, CSS, SCSS

13. Neumorphism Social Share Button

See the Pen
Neumorphism Social Share Button
by Yuhomyan (@yuhomyan)
on CodePen.


Author: Yuhomyan @yuhomyan
Links: Source Code / Demo
Created on: July 17, 2020
Made with: HTML, CSS

14. Full CSS Neumorphic Joystick

See the Pen
Full CSS Neumorphic Joystick
by Vincent Durand (@onediv)
on CodePen.


Author: Vincent Durand @onediv
Links: Source Code / Demo
Created on: July 15, 2020
Made with: HTML(Haml), CSS, SCSS

15. Neumorphism Button

See the Pen
Neumorphism Button
by Sebastian Piskaty (@sebastian-piskaty)
on CodePen.


Author: Sebastian Piskaty @sebastian-piskaty
Links: Source Code / Demo
Created on: December 24, 2019
Made with: HTML, CSS, SCSS, JS

16. Neuomorphic Keyboard

See the Pen
Neuomorphic Keyboard
by Braydon Coyer (@braydoncoyer)
on CodePen.


Author: Braydon Coyer @braydoncoyer
Links: Source Code / Demo
Created on: February 05, 2020
Made with: HTML, CSS, SCSS, JS

17. Lexon Tykho 3

See the Pen
Lexon Tykho 3
by Chris Ota (@chrisota)
on CodePen.


Author: Chris Ota @chrisota
Links: Source Code / Demo
Created on: May 26, 2020
Made with: HTML(Pug), CSS(SCSS)

18. Neumorphic Color Palette (With Sound)

See the Pen
Neumorphic Color Palette (With Sound)
by Aniket Kudale (@aniketkudale)
on CodePen.


Author: Aniket Kudale @aniketkudale
Links: Source Code / Demo 
Created on: March 15, 2020
Made with: HTML, CSS, JS

19. Creative CSS Animation Effects CSS3 Neumorphism

See the Pen
Creative CSS Animation Effects CSS3 Neumorphism
by samuel garcia (@sam_garcia2)
on CodePen.


Author: samuel garcia @sam_garcia2
Links: Source Code / Demo
Created on: January 28, 2020
Made with: HTML, CSS, SCSS

20. Soft-UI Button Pattern

See the Pen
Soft-UI Button Pattern
by Tyler Scott Williams (@ogdenstudios)
on CodePen.


Author: Tyler Scott Williams @ogdenstudios
Links: Source Code / Demo
Created on: January 06, 2020
Made with: HTML, CSS

21. Neumorphism Search Bar

See the Pen
Neumorphism Search Bar
by Tran Dinh Trung (@tdtrung17693)
on CodePen.


Author: Tran Dinh Trung @tdtrung17693
Links: Source Code / Demo
Created on: April 19, 2020
Made with: HTML, CSS, SCSS, JS

22. Neumorphism UI // Card

See the Pen
Neumorphism UI // Card
by Cosimo Scarpa (@coswise)
on CodePen.


Author: Cosimo Scarpa @coswise
Links: Source Code / Demo
Created on: January 05, 2020
Made with: HTML, CSS, SCSS, JS

23. CSS Neumorphism Card UI Hover Effects | CSS3 Responsive Design

See the Pen
CSS Neumorphism Card UI Hover Effects | CSS3 Responsive Design
by Okba Design (@Okba-Design)
on CodePen.


Author: Okba Design @Okba-Design
Links: Source Code / Demo
Created on: July 21, 2020
Made with: HTML, CSS

24. Neumorphism Working Analog Clock UI Design

See the Pen
Javascript Clock | CSS Neumorphism Working Analog Clock UI Design
by samuel garcia (@sam_garcia2)
on CodePen.


Author: samuel garcia @sam_garcia2
Links: Source Code / Demo
Created on: September 13, 2020
Made with: HTML, CSS, SCSS, JS

25. Soft Buttons

See the Pen
#codeVember #4/2021: soft buttons (hover/ focus and press – keep pressed, release, click fast, play with it ????)
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: November 04, 2021
Made with: HTML(Pug), CSS(SCSS), JS(Babel)

26. Neumorphic Dominoes

See the Pen
Neumorphic Dominoes
by P (@petegarvin1)
on CodePen.


Author: P @petegarvin1
Links: Source Code / Demo
Created on: Mrach 09, 2020
Made with: HTML, CSS

27. Neumorph

See the Pen
Neumorph
by pourya (@pouriversal)
on CodePen.


Author: pourya @pouriversal
Links: Source Code / Demo
Created on: January 30, 2020
Made with: HTML, CSS

28. Neumorphism Gradient Loader

See the Pen
Neumorphism Gradient Loader
by samuel garcia (@sam_garcia2)
on CodePen.


Author: Samuel garcia @sam_garcia2
Links: Source Code / Demo
Created on: May 03, 2020
Made with: HTML, CSS, SCSS

29. Music Player UI

See the Pen
Music Player UI
by S G (@sowg)
on CodePen.


Author: S G @sowg
Links: Source Code / Demo
Created on: October 20, 2021
Made with: HTML(Pug), CSS(SCSS), JS(Babel)

30. Payment App (Neumorphism)

See the Pen
Payment App (Neumorphism)
by Steven Brannum (@sdbrannum)
on CodePen.


Author: Steven Brannum @sdbrannum
Links: Source Code / Demo
Created on: September 29, 2019
Made with: HTML, CSS, SCSS, JS

31. Satisfying Button (Neumorphism)

See the Pen
Satisfying Button (Neumorphism)
by Yuhomyan (@yuhomyan)
on CodePen.


Author: Yuhomyan @yuhomyan
Links: Source Code / Demo
Created on: July 28, 2020
Made with: HTML, CSS

32. Music Player Neumorphism

See the Pen
Music Player Neumorphism
by Lupita (@lupitacode)
on CodePen.


Author: Lupita @lupitacode
Links: Source Code / Demo
Created on: June  27, 2020
Made with: HTML, CSS, JS

33. Neumorphism Weather App

See the Pen
Neumorphism Weather App
by Travis Williamson (@travisw)
on CodePen.


Author: Travis Williamson @travisw
Links: Source Code / Demo
Created on: January 17, 2020
Made with: HTML, CSS, SCSS

34. Fontawesome 5 Neumorphic Star Rating

See the Pen
BS4 / Fontawesome 5 Neumorphic star rating
by Jenny Core-Holt (@jennych)
on CodePen.


Author: Jenny Core-Holt @jennych
Links: Source Code / Demo
Created on: April 15, 2020
Made with: HTML, CSS, SCSS

35. GSAP – Neumorphism Logo reveal

See the Pen
GSAP – Neumorphism Logo reveal –
by Shunya Koide (@shunyadezain)
on CodePen.


Author: Shunya Koide @shunyadezain
Links: Source Code / Demo
Created on: July 02, 2020
Made with: HTML, CSS, SCSS, JS

36. Neumorphism and Toggles

See the Pen
Neumorphism and toggles
by Ryan Parag (@ryanparag)
on CodePen.


Author: Ryan Parag @ryanparag
Links: Source Code / Demo
Created on: February 07, 2020
Made with: HTML(Pug), CSS(SCSS), JS(Babel)

37. Neumorphism

See the Pen
Neumorphism
by Angius (@Angius)
on CodePen.


Author: Angius @Angius
Links: Source Code / Demo
Created on: January 08, 2020
Made with: HTML, CSS(SASS)

38. Neumorphic Buttons

See the Pen
Neumorphic Buttons
by Sikriti Dakua (@dev_loop)
on CodePen.


Author: Sikriti Dakua @dev_loop
Links: Source Code / Demo
Created on: December 31, 2019
Made with: HTML, CSS, SCSS, JS

39. Neumorphic Bubbles

See the Pen
Neumorphic Bubbles
by Aniket Kudale (@aniketkudale)
on CodePen.


Author: Aniket Kudale @aniketkudale
Links: Source Code / Demo
Created on: March 03, 2020
Made with: HTML, CSS, JS

40. Neumorphic Radio

See the Pen
Neumorphic Radio
by halvves (@halvves)
on CodePen.


Author: halvves @halvves
Links: Source Code / Demo
Created on: February 06, 2020
Made with: HTML, CSS

41. Neumorphism UI // Button

See the Pen
Neumorphism UI // Button
by Cosimo Scarpa (@coswise)
on CodePen.


Author: Cosimo Scarpa @coswise
Links: Source Code / Demo
Created on: January 04, 2020
Made with: HTML, CSS, SCSS, JS

42. Satisfying Button (Neumorphism)

See the Pen
Satisfying Button (Neumorphism)
by Yuhomyan (@yuhomyan)
on CodePen.


Author: Yuhomyan @yuhomyan
Links: Source Code / Demo
Created on: July 28, 2020
Made with: HTML, CSS

43. Neumorphism Transition using Houdini

See the Pen
Neumorphism transition using Houdini
by Jakob Eriksen (@jakob-e)
on CodePen.


Author: JAKOB ERIKSEN @jakob-e
Links: Source Code / Demo
Created on: February 14, 2020
Made with: HTML, CSS, SCSS, JS(TypeScript)

44. Neumorphic Fitbit UI

See the Pen
Neumorphic Fitbit UI
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: January 11, 2020
Made with: HTML, CSS

45. Fontawesome 5 Neumorphic star rating

See the Pen
BS4 / Fontawesome 5 Neumorphic star rating
by Jenny Core-Holt (@jennych)
on CodePen.


Author: Jenny Core-Holt @jennych
Links: Source Code / Demo
Created on: April 15, 2020
Made with: HTML, CSS, SCSS

46. Neumorphism Heartly

See the Pen
neumorphism, heartly
by gitSushi (@gitsushi)
on CodePen.


Author: gitSushi @gitsushi
Links: Source Code / Demo
Created on: January 27, 2020
Made with: HTML(Pug), CSS(Sass), JS

47. Neumorphic Loading Animation

See the Pen
Neumorphic Loading Animation
by Ruphaa Ganesh (@ruphaa)
on CodePen.


Author: Ruphaa Ganesh @ruphaa
Links: Source Code / Demo
Created on: Ocotber 16, 2020
Made with: HTML, CSS, JS

48. Neumorphism Toggle

See the Pen
Neumorphism Toggle
by Aaron Iker (@aaroniker)
on CodePen.


Author: Aaron Iker @aaroniker
Links: Source Code / Demo
Created on: February 15, 2020
Made with: HTML, CSS, SCSS

49. Neumorphism Login Form

See the Pen
Neumorphism Login Form
by Ricardo Oliva Alonso (@ricardoolivaalonso)
on CodePen.


Author: Ricardo Oliva Alonso @ricardoolivaalonso
Links: Source Code / Demo
Created on: May 09, 2020
Made with: HTML(Pug), CSS, SCSS, JS

50. Dark Neumorphism Circle Loader

See the Pen
Dark Neumorphism Circle Loader
by Robbe Huybrechts (@Robinskie)
on CodePen.


Author: Robbe Huybrechts @Robinskie
Links: Source Code / Demo
Created on: October 11, 2021
Made with: HTML, CSS, JS

51. Neumorphism On off

See the Pen
Neumorphism On off
by Arslan Khan (@Arslan777)
on CodePen.


Author: Arslan Khan @Arslan777
Links: Source Code / Demo
Created on: September 19, 2021
Made with: HTML, CSS

52. Neumorphic Brick Phone

See the Pen
Neumorphic Brick Phone
by Jon Kantner (@jkantner)
on CodePen.


Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: June 4, 2021
Made with: HTML, CSS, JS

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.