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);
<divclass
=
"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;}