Mastering in CSS3 Box-Shadow From Beginner to Expert 02 | Box Shadow and Neumorphism in Html & CSS



Mastering in CSS3 Box-Shadow From Beginner to Expert 02 | Box Shadow and Neumorphism in Html & CSS
published by

91


In this tutorial I want to show you guys how to create neumorphic elements using only CSS and HTML. Neumorphism is a controversial design trend which started in late 2019. It has its ups and downs and although it probably won’t become a widely used design trend, I believe that certain types of websites, such as art & futuristic related industries could use neumorphism.Before we dive into the steps on creating neumorphic elements, I’d like to present to you some of the rules that you should follow when creating your components.

  • Elements such as buttons, cards should all have two opposing shadows: one light and one dark;
  • The background color of the element should be the same or very similar to the background color of the body in general;
  • Elements should be rounded and not squared (ie. border-radius);
  • Element borders should be non existing or at most subtle;
  • Although gray is the original color of neumorphism, you can use any color you like (dark modes are also great);
  • You can choose a secondary color to highlight text & icon color inside the elements.

Following the guidelines above we will create a button element using only CSS and HTML.