How to create Neumorphism Effect using HTML and CSS ?
Last Updated :
14 Jan, 2021
Improve
Neumorphism (neomorphism) is a modern way of styling web-elements of any web-page and providing a 3D effect. This animation effect can be easily generated by using HTML and CSS. Box-shadow property of CSS can be used to implemented Neumorphism. It is used to add a dark shadow to one side and a light shadow to the other side of the given element.
HTML code: In this section we will make the layout of the box.
- index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="container">
<div class="neu-1"> GeeksForGeeks</div>
<div class="neu-2">GeeksForGeeks</div>
</div>
</body>
</html>
CSS code: In this section, we will use some CSS properties to design the box.
- index.css:
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 30px;
background: #dde1e7;
}
.neu-1 {
height: 300px;
width: 300px;
background: #dde1e7;
border-radius: 6px;
box-shadow: -3px -3px 7px #ffffffb2,
3px 3px 5px rgba(94, 104, 121, 0.945);
}
.neu-2 {
margin: 50px;
height: 300px;
width: 300px;
background: #dde1e7;
border-radius: 6px;
box-shadow: inset -3px -3px 7px #ffffffb0,
inset 3px 3px 5px rgba(94, 104, 121, 0.692);
}
</style>
Complete Code: In this section, we will combine the above two section to create a Neumorphism using HTML and CSS.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 30px;
background: #dde1e7;
}
.neu-1 {
height: 300px;
width: 300px;
background: #dde1e7;
border-radius: 6px;
box-shadow: -3px -3px 7px #ffffffb2,
3px 3px 5px rgba(94, 104, 121, 0.945);
}
.neu-2 {
margin: 50px;
height: 300px;
width: 300px;
background: #dde1e7;
border-radius: 6px;
box-shadow: inset -3px -3px 7px #ffffffb0,
inset 3px 3px 5px rgba(94, 104, 121, 0.692);
}
</style>
</head>
<body>
<div class="container">
<div class="neu-1"> GeeksForGeeks</div>
<div class="neu-2">GeeksForGeeks</div>
</div>
</body>
</html>
Output:
