<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NeuMorph</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <div class="type1"></div>
        <div class="type2"></div>
        <div class="type3"></div>
        <div class="type4"></div>
    </div>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100vw;
  background: rgb(194, 194, 194);
  overflow: hidden;
}

.container {
  height: 60vh;
  width: 90vw;
  /* Center the main div */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* center the elements inside the div */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.type1,
.type2,
.type3,
.type4 {
  height: 130px;
  width: 130px;
  border-radius: 30px;
  background: rgb(194, 194, 194);
}

.type1 {
  box-shadow: 20px 20px 60px #8d8d8d71, -20px -20px 60px #e0e0e0;
}

.type2 {
  background: linear-gradient(145deg, #8d8d8d71, #e0e0e0);
  box-shadow: 20px 20px 60px #8d8d8d71, -20px -20px 60px #e0e0e0;
}

.type3 {
  background: linear-gradient(145deg, #e0e0e0, #8d8d8d71);
  box-shadow: 20px 20px 60px #6969698f, -20px -20px 60px #e0e0e0b0;
}

.type4 {
  background: #e0e0e0;
  box-shadow: inset 20px 20px 60px #8d8d8d9a, inset -20px -20px 60px #e0e0e0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.