62+ CSS Neumorphism Examples

Are you looking to add an extruded 3D effect to your web page? Look no further! In this collection, we are featuring 62+ HTML and CSS Neumorphism effect examples that you can use on your web project. We’ve sourced these neumorphism examples from top platforms like GitHub and Codepen.

Our team carefully selected and hand-picked each neumorphism example in our collection; whether it’s typo animations, search bars, card UI hover effects, 3D patterns, or toggle effects, we have something for everyone.

We’ve curated the best Neumorphism collection for web or UI designers, developers, digital marketers, UX/UI designers, and graphic designers. These Neumorphism code snippets come with multiple design options; each example is simple to customise, ensuring a unique and memorable experience for your users.

Let’s checkout these 100% free CSS neumorphism effects and magically engages users, enhance aesthetics of your digital product.

1. Neumorphism CSS Effect

See the Pen <a href="https://codepen.io/Web_Cifar/pen/gObzrMR"> Neumorphism CSS Effect</a> by Web Cifar (<a href="https://codepen.io/Web_Cifar">@Web_Cifar</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Web Cifar
Source: Code / Demo
Created on: JANUARY 10, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

2. Neumorphism in UI design

See the Pen <a href="https://codepen.io/kanhaiyasharma/pen/vYEZZvd"> Neumorphism in UI design</a> by Kanhaiya Sharma (<a href="https://codepen.io/kanhaiyasharma">@kanhaiyasharma</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kanhaiya Sharma
Source: Code / Demo
Created on: DECEMBER 25, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

3. Music Player Neumorphic (Soft UI) Style

See the Pen <a href="https://codepen.io/dilums/pen/JjoyaBO"> Music Player Neumorphic (Soft UI) Style</a> by Dilum Sanjaya (<a href="https://codepen.io/dilums">@dilums</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dilum Sanjaya
Source: Code / Demo
Created on: DECEMBER 29, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

4. Neumorphism Typo

See the Pen <a href="https://codepen.io/ilithya/pen/vYOZJeN"> Neumorphism Typo</a> by ilithya (<a href="https://codepen.io/ilithya">@ilithya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: ilithya
Source: Code / Demo
Created on: MARCH 1, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

5. Neumorphism Search Bar

See the Pen <a href="https://codepen.io/tdtrung17693/pen/BaozOzQ"> Neumorphism Search Bar</a> by Tran Dinh Trung (<a href="https://codepen.io/tdtrung17693">@tdtrung17693</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tran Dinh Trung
Source: Code / Demo
Created on: APRIL 19, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

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

See the Pen <a href="https://codepen.io/Okba-Design/pen/GRoPOeW"> CSS Neumorphism Card UI Hover Effects | CSS3 Responsive Design</a> by Okba Design (<a href="https://codepen.io/Okba-Design">@Okba-Design</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Okba Design
Source: Code / Demo
Created on: JULY 21, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Neumorphism Play Button

See the Pen <a href="https://codepen.io/yuhomyan/pen/LYGMQJJ"> Neumorphism Play Button</a> by Yuhomyan (<a href="https://codepen.io/yuhomyan">@yuhomyan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yuhomyan
Source: Code / Demo
Created on: JULY 21, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

8. Neumorphism and Toggles

See the Pen <a href="https://codepen.io/ryanparag/pen/OJVJrxZ"> Neumorphism and toggles</a> by Ryan Parag (<a href="https://codepen.io/ryanparag">@ryanparag</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ryan Parag
Source: Code / Demo
Created on: FEBRUARY 07, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTM(Pug), CSS(SCSS), , JavaScript(Babel)

9. Neumorphism Button – Squishy

See the Pen <a href="https://codepen.io/ahmadbassamemran/pen/GRZwEOX"> Neumorphism Button – Squishy</a> by Ahmad Emran (<a href="https://codepen.io/ahmadbassamemran">@ahmadbassamemran</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ahmad Emran
Source: Code / Demo
Created on: SEPTEMBER 21, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. Neumorphism Working Analog Clock UI Design

See the Pen <a href="https://codepen.io/sam_garcia2/pen/RwaydpP"> Javascript Clock | CSS Neumorphism Working Analog Clock UI Design</a> by samuel garcia (<a href="https://codepen.io/sam_garcia2">@sam_garcia2</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: samuel garcia
Source: Code / Demo
Created on: SEPTEMBER 13, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

11. Neumorphism – Wave Animation

See the Pen <a href="https://codepen.io/Craaftx/pen/vYGVjYM"> Neumorphism – Wave Animation</a> by Guilmain Dorian (<a href="https://codepen.io/Craaftx">@Craaftx</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Guilmain Dorian
Source: Code / Demo
Created on: SEPTEMBER 19, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS, JavaScript

12. Neumorphism

See the Pen <a href="https://codepen.io/Angius/pen/MWYQzqv"> Neumorphism</a> by Angius (<a href="https://codepen.io/Angius">@Angius</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Angius
Source: Code / Demo
Created on: JANUARY 08, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

13. Basic Neumorphism Card Style Success + Lottie

See the Pen <a href="https://codepen.io/designfenix/pen/yLJWMKV"> Basic Neumorphism Card Style Success + Lottie</a> by Fernando Cohen (<a href="https://codepen.io/designfenix">@designfenix</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Fernando Cohen
Source: Code / Demo
Created on: NOVEMBER 19, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. Neumorphic Buttons

See the Pen <a href="https://codepen.io/dev_loop/pen/XWJeKNO"> Neumorphic Buttons</a> by Sikriti Dakua (<a href="https://codepen.io/dev_loop">@dev_loop</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sikriti Dakua
Source: Code / Demo
Created on: DECEMBER 31, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

15. A Bit of Neumorphism

See the Pen <a href="https://codepen.io/drovosek2703/pen/VwYRZrM"> A bit of neumorphism</a> by Damir (<a href="https://codepen.io/drovosek2703">@drovosek2703</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Damir
Source: Code / Demo
Created on: JANUARY 24, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

16. Soft Buttons

See the Pen <a href="https://codepen.io/thebabydino/pen/bGrLprB"> #codeVember #4/2021: soft buttons (hover/ focus and press – keep pressed, release, click fast, play with it 🤪)</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Tudor
Source: Code / Demo
Created on: NOVEMBER 04, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript(Babel)

17. Neumorphic Bubbles

See the Pen <a href="https://codepen.io/aniketkudale/pen/gOpxRmZ"> Neumorphic Bubbles</a> by Aniket Kudale (<a href="https://codepen.io/aniketkudale">@aniketkudale</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aniket Kudale
Source: Code / Demo
Created on: MARCH 03, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

18. Neumorphic Calculator

See the Pen <a href="https://codepen.io/Lilykhan/pen/XWXPEbL"> Neumorphic Calculator.</a> by Lily Khan (<a href="https://codepen.io/Lilykhan">@Lilykhan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lily Khan
Source: Code / Demo
Created on: JULY 15, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

19. GSAP – Neumorphism Logo reveal

See the Pen <a href="https://codepen.io/shunyadezain/pen/xxZpxKQ"> GSAP – Neumorphism Logo reveal –</a> by Shunya Koide / popo (<a href="https://codepen.io/shunyadezain">@shunyadezain</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shunya Koide
Source: Code / Demo
Created on: JULY 02, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

20. Neumorphic form

See the Pen <a href="https://codepen.io/prathkum/pen/OJRvVzY"> Neumorphic form</a> by Pratham (<a href="https://codepen.io/prathkum">@prathkum</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Pratham
Source: Code / Demo
Created on: JANUARY 2, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

21. Neumorphism UI // Card

See the Pen <a href="https://codepen.io/coswise/pen/BayJyOP"> Neumorphism UI // Card</a> by Cosimo Scarpa (<a href="https://codepen.io/coswise">@coswise</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cosimo Scarpa
Source: Code / Demo
Created on: JANUARY 05, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

22. Simple & Minimal Neumorphic Buttons

See the Pen <a href="https://codepen.io/Shinobis/pen/yLNgWGM"> Simple & Minimal Neumorphic Buttons</a> by Shinobis (<a href="https://codepen.io/Shinobis">@Shinobis</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shinobis
Source: Code / Demo
Created on: FEBRUARY 25, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

23. Neumorphic Dominoes

See the Pen <a href="https://codepen.io/petegarvin1/pen/ExjoKXd"> Neumorphic Dominoes</a> by P (<a href="https://codepen.io/petegarvin1">@petegarvin1</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: P
Source: Code / Demo
Created on: MARCH 09, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

24. Neumorphic Shapes (Mixin Included)

See the Pen <a href="https://codepen.io/ykadosh/pen/YzpJNLg"> Neumorphic Shapes (Mixin Included)</a> by Yoav Kadosh (<a href="https://codepen.io/ykadosh">@ykadosh</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yoav Kadosh
Source: Code / Demo
Created on: MARCH 8, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

25. Neumorphic Radio

See the Pen <a href="https://codepen.io/halvves/pen/QWbWGGb"> Neumorphic Radio</a> by halvves (<a href="https://codepen.io/halvves">@halvves</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: halvves
Source: Code / Demo
Created on: FEBRUARY 06, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

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

See the Pen <a href="https://codepen.io/quentin-feret/pen/QWKqLPx"> Glassmorphism vs Neumorphism Cards | CSS, Js & VanillaTilt</a> by Quentin Feret (<a href="https://codepen.io/quentin-feret">@quentin-feret</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Quentin Feret
Source: Code / Demo
Created on: DECEMBER 22, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

27. Neumorphism Search Bar

28. Neumorphic Shadows

See the Pen <a href="https://codepen.io/oscar-jite/pen/yLPBgLX"> Neumorphic Shadows</a> by Oscar-Jite (<a href="https://codepen.io/oscar-jite">@oscar-jite</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Oscar-Jite
Source: Code / Demo
Created on: JANUARY 24, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

29. Neumorph

See the Pen <a href="https://codepen.io/pouriversal/pen/zYxVOeg"> Neumorph</a> by pourya (<a href="https://codepen.io/pouriversal">@pouriversal</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: pourya
Source: Code / Demo
Created on: JANUARY 30, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

30. Neumorphism Calculator Design

See the Pen <a href="https://codepen.io/KelvinBLAZE/pen/xxbrqxr"> Neumorphism calculator design</a> by Ifeanyi Kelvin Ossai (<a href="https://codepen.io/KelvinBLAZE">@KelvinBLAZE</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ifeanyi Kelvin Ossai
Source: Code / Demo
Created on: DECEMBER 25, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

31. Soft-UI Button Pattern

See the Pen <a href="https://codepen.io/ogdenstudios/pen/eYmyKJp"> Soft-UI Button Pattern</a> by Tyler Scott Williams (<a href="https://codepen.io/ogdenstudios">@ogdenstudios</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tyler Scott Williams
Source: Code / Demo
Created on: JANUARY 06, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

32. Neumorphism Accessibility Example

See the Pen <a href="https://codepen.io/michael-j-fordham/pen/OJPqpog"> Neumorphism Accessibility Example</a> by Michael J. Fordham (<a href="https://codepen.io/michael-j-fordham">@michael-j-fordham</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Michael J. Fordham
Source: Code / Demo
Created on: JANUARY 25, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

33. Neumorphism Gradient Loader

Author: Samuel garcia
Source: Code / Demo
Created on: MAY 03, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

34. Neumorphism UI // Button

See the Pen <a href="https://codepen.io/coswise/pen/oNgomEy"> Neumorphism UI // Button</a> by Cosimo Scarpa (<a href="https://codepen.io/coswise">@coswise</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cosimo Scarpa
Source: Code / Demo
Created on: JANUARY 04, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

35. Neumorphism Buttons

See the Pen <a href="https://codepen.io/zeynepozdem/pen/yLymeja"> Neumorphism Buttons</a> by zeynep (<a href="https://codepen.io/zeynepozdem">@zeynepozdem</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: zeynep
Source: Code / Demo
Created on: FEBRUARY 02, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

36. Neumorphism Toggle

See the Pen <a href="https://codepen.io/aaroniker/pen/qBdZEjQ"> Neumorphism Toggle</a> by Aaron Iker (<a href="https://codepen.io/aaroniker">@aaroniker</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aaron Iker
Source: Code / Demo
Created on: FEBRUARY 15, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

37. Neumorphism Slider Concept 2020

See the Pen <a href="https://codepen.io/designfenix/pen/YzPaBeQ"> Neumorphism Slider Concept 2020</a> by Fernando Cohen (<a href="https://codepen.io/designfenix">@designfenix</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Fernando Cohen
Source: Code / Demo
Created on: JANUARY 10, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

38. Music Player UI

See the Pen <a href="https://codepen.io/sowg/pen/abyZMGB"> Music Player UI</a> by S G (<a href="https://codepen.io/sowg">@sowg</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: S G
Source: Code / Demo
Created on: OCTOBER 20, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript(Babel)

39. Neumorphic Brick Phone

See the Pen <a href="https://codepen.io/jkantner/pen/MWpVEpj"> Neumorphic Brick Phone</a> by Jon Kantner (<a href="https://codepen.io/jkantner">@jkantner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jon Kantner
Source: Code / Demo
Created on: JUNE 4, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

40. Neumorphism Social Share Button

See the Pen <a href="https://codepen.io/yuhomyan/pen/abdRKrM"> Neumorphism Social Share Button</a> by Yuhomyan (<a href="https://codepen.io/yuhomyan">@yuhomyan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yuhomyan
Source: Code / Demo
Created on: JULY 17, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

41. Satisfying Button (Neumorphism)

See the Pen <a href="https://codepen.io/yuhomyan/pen/MWKdKpr"> Satisfying Button (Neumorphism)</a> by Yuhomyan (<a href="https://codepen.io/yuhomyan">@yuhomyan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yuhomyan
Source: Code / Demo
Created on: JULY 28, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

42. Neumorphism – Animated Social Icons

See the Pen <a href="https://codepen.io/nirnejak/pen/ExaRQEB"> Neumorphism – Animated Social Icons</a> by Jitendra Nirnejak (<a href="https://codepen.io/nirnejak">@nirnejak</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jitendra Nirnejak
Source: Code / Demo
Created on: JANUARY 13, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

43. Payment App (Neumorphism)

See the Pen <a href="https://codepen.io/sdbrannum/pen/PowKRGj"> Payment App (Neumorphism)</a> by Steven Brannum (<a href="https://codepen.io/sdbrannum">@sdbrannum</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Steven Brannum
Source: Code / Demo
Created on: SEPTEMBER 29, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

44. Neumorphism Transition using Houdini

See the Pen <a href="https://codepen.io/jakob-e/pen/VwLeXBB"> Neumorphism transition using Houdini</a> by Jakob Eriksen (<a href="https://codepen.io/jakob-e">@jakob-e</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: JAKOB ERIKSEN
Source: Code / Demo
Created on: FEBRUARY 14, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(TypeScript)

45. Full CSS Neumorphic Joystick

See the Pen <a href="https://codepen.io/onediv/pen/QWyVzpw"> Full CSS Neumorphic Joystick</a> by Vincent Durand (<a href="https://codepen.io/onediv">@onediv</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vincent Durand
Source: Code / Demo
Created on: JULY 15, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

46. Neumorphism Login Form

See the Pen <a href="https://codepen.io/ricardoolivaalonso/pen/YzyaRPN"> Neumorphism Login Form</a> by Ricardo Oliva Alonso (<a href="https://codepen.io/ricardoolivaalonso">@ricardoolivaalonso</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ricardo Oliva Alonso
Source: Code / Demo
Created on: MAY 09, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML((Pug) CSS(SCSS), JavaScript

47. Satisfying Button (Neumorphism)

48. Neumorphism Button

See the Pen <a href="https://codepen.io/sebastian-piskaty/pen/dyPWwLL"> Neumorphism Button</a> by Sebastian Piskaty (<a href="https://codepen.io/sebastian-piskaty">@sebastian-piskaty</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sebastian Piskaty
Source: Code / Demo
Created on: DECEMBER 24, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

49. Neumorphic Fitbit UI

See the Pen <a href="https://codepen.io/jkantner/pen/poWxOVY"> Neumorphic Fitbit UI</a> by Jon Kantner (<a href="https://codepen.io/jkantner">@jkantner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jon Kantner
Source: Code / Demo
Created on: JANUARY 11, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

50. Music Player Neumorphism

See the Pen <a href="https://codepen.io/lupitacode/pen/oNbeoEZ"> Music Player Neumorphism</a> by Lupita (<a href="https://codepen.io/lupitacode">@lupitacode</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lupita
Source: Code / Demo
Created on: JUNE 27, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

51. Neuomorphic Keyboard

See the Pen <a href="https://codepen.io/braydoncoyer/pen/poJzLLO"> Neuomorphic Keyboard</a> by Braydon Coyer (<a href="https://codepen.io/braydoncoyer">@braydoncoyer</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Braydon Coyer
Source: Code / Demo
Created on: FEBRUARY 05, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

52. Fontawesome 5 Neumorphic star rating

See the Pen <a href="https://codepen.io/jennych/pen/yLYeMQm"> BS4 / Fontawesome 5 Neumorphic star rating</a> by Jenny Core-Holt (<a href="https://codepen.io/jennych">@jennych</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jenny Core-Holt
Source: Code / Demo
Created on: APRIL 15, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

53. Neumorphism Weather App

See the Pen <a href="https://codepen.io/travisw/pen/JjoaadE"> Neumorphism Weather App</a> by Travis Williamson (<a href="https://codepen.io/travisw">@travisw</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Travis Williamson
Source: Code / Demo
Created on: JANUARY 17, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

54. Lexon Tykho 3

See the Pen <a href="https://codepen.io/chrisota/pen/XWmQEGX"> Lexon Tykho 3</a> by Chris Ota (<a href="https://codepen.io/chrisota">@chrisota</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Ota
Source: Code / Demo
Created on: MAY 26, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

55. Neumorphism Heartly

See the Pen <a href="https://codepen.io/gitsushi/pen/YzPMwMw"> neumorphism, heartly</a> by gitSushi (<a href="https://codepen.io/gitsushi">@gitsushi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: gitSushi
Source: Code / Demo
Created on: JANUARY 27, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Sass), JavaScript

56. Neumorphic Elements

See the Pen <a href="https://codepen.io/myacode/pen/PoqQQNM"> Neumorphic Elements</a> by Maria Marin (<a href="https://codepen.io/myacode">@myacode</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Maria Marin
Source: Code / Demo
Created on: MARCH 11, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

57. Dark Neumorphism Circle Loader

See the Pen <a href="https://codepen.io/Robinskie/pen/LYjYgzB"> Dark Neumorphism Circle Loader</a> by Robbe Huybrechts (<a href="https://codepen.io/Robinskie">@Robinskie</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Robbe Huybrechts
Source: Code / Demo
Created on: OCTOBER 11, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

58. Fontawesome 5 Neumorphic Star Rating

59. Neumorphic Color Palette (With Sound)

See the Pen <a href="https://codepen.io/aniketkudale/pen/BaNxomQ"> Neumorphic Color Palette (With Sound)</a> by Aniket Kudale (<a href="https://codepen.io/aniketkudale">@aniketkudale</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aniket Kudale
Source: Code / Demo
Created on: MARCH 15, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

60. Neumorphic Loading Animation

See the Pen <a href="https://codepen.io/ruphaa/pen/QWENjRr"> Neumorphic Loading Animation</a> by Ruphaa Ganesh (<a href="https://codepen.io/ruphaa">@ruphaa</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ruphaa Ganesh
Source: Code / Demo
Created on: Ocotber 16, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

61. Gradient Loader

See the Pen <a href="https://codepen.io/HenryZarza/pen/qBZYLaZ"> Gradient Loader</a> by Henry Zarza (<a href="https://codepen.io/HenryZarza">@HenryZarza</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Henry Zarza
Source: Code / Demo
Created on: SEPTEMBER 13, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

62. Creative CSS Animation Effects CSS3 Neumorphism

See the Pen <a href="https://codepen.io/sam_garcia2/pen/xxRKRmK"> Creative CSS Animation Effects CSS3 Neumorphism</a> by samuel garcia (<a href="https://codepen.io/sam_garcia2">@sam_garcia2</a>) on <a href="https://codepen.io">CodePen</a>. Author: samuel garcia
Source: Code / Demo
Created on: JANUARY 28, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)