How to create Neumorphism Effect using HTML and CSS ?

Last Updated : 14 Jan, 2021

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:

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:

HTML

<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.

HTML

<!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>