How to create Neumorphism Design Elements using CSS

 
Maniisha Gorasiya

NEUMORPHISM is a modern iteration of SKEUOMORPHISM, used in designing the Web elements, photoshop elements & vector objects, frames, screens, etc.

Nowadays  Neumorphism is relatively latest and attractive design trend. It's attractiveness is marked by minimal and real-looking UI Design.

Neumorphic UI elements look like they are attached with the background, as if the elements are force out from the background or into the background. Neumorphism is described as "Soft UI" because of the way soft box shadows are used to create the effect with two different color of shadow.

Creating a neumorphic interface with CSS is apparently as easy as applying a regular box-shadow property on any elements with different style of shadow.

Neumorphic Box Shadow CSS

box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [optional spread-radius] [color];


box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px  rgba(255,255,255, 0.5);

<div class="neuEffect"></div> 

body {  align-items: center;  background-color: #e0e5eb;  display: flex;  height: 100vh;  justify-content: center;}

.neuEffect{  box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px  rgba(255,255,255, 0.5);  border-radius: 10px;  align-items: center;  background-color: #e0e5eb;  display: flex;  height: 200px;  width: 200px;  justify-content: center;  margin-right: 6rem;}




Comments

No Comment

Leave a Comment

Your email address will not be published.



#212, JV Square 2, Sanskar Nagar, Bhuj-370001, Gujarat
+(91) 97 26 134340
Mon-Fri 9:00am-6:00pm
talk@lpktechnosoft.com
24 X 7 online support