Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create Neumorphism Effect using HTML and CSS ?

  • Difficulty Level : Easy
  • 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!