62+ CSS Neumorphism Examples

Best and free 62+ HTML and CSS neumorphism effect code examples sourced from GitHub and Codepen for front-end developers and web designers.

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)