<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Neumorphism Card</title>
  </head>
  <body>
    <div class="card">
      <div class="header">
        <img src="person1.jpg" alt="" />
      </div>
      <div class="body">
        <h2>
          Joy
        </h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
          odio tenetur earum voluptas corporis deleniti quasi repellendus
          maxime, quae amet ipsam voluptatibus vero, reiciendis nam provident
          dolore iste tempore eos.
        </p>
      </div>
      <div class="footer">
        <button>Read More</button>
      </div>
    </div>
    <div class="card">
      <div class="header">
        <img src="person2.jpg" alt="" />
      </div>
      <div class="body">
        <h2>
          Evelyn
        </h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
          odio tenetur earum voluptas corporis deleniti quasi repellendus
          maxime, quae amet ipsam voluptatibus vero, reiciendis nam provident
          dolore iste tempore eos.
        </p>
      </div>
      <div class="footer">
        <button>Read More</button>
      </div>
    </div>
    <div class="card">
      <div class="header">
        <img src="person3.jpg" alt="" />
      </div>
      <div class="body">
        <h2>
          Mark
        </h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
          odio tenetur earum voluptas corporis deleniti quasi repellendus
          maxime, quae amet ipsam voluptatibus vero, reiciendis nam provident
          dolore iste tempore eos.
        </p>
      </div>
      <div class="footer">
        <button>Read More</button>
      </div>
    </div>
  </body>
</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: #b19cd9;
}

.card {
  position: relative;
  background: #b19cd9;
  margin: 30px;
  height: 350px;
  width: 220px;
  border-radius: 20px;
  transition: 0.2s linear;
  box-shadow: -6px -6px 25px 0 rgba(205, 177, 255, 0.8),
    6px 6px 25px 0 rgba(0, 0, 0, 0.2);
}

.card:hover {
  transform: scale(0.99);
  box-shadow: inset -6px -6px 25px 0 rgba(205, 177, 255, 0.9),
    inset 6px 6px 25px 0 rgba(0, 0, 0, 0.1);
}

.header {
  position: absolute;
  height: 70px;
  width: 70px;
  left: 50%;
  top: 15px;
  transform: translateX(-50%);
  border-radius: 50%;
  box-shadow: inset -6px -6px 10px 0 rgba(205, 177, 255, 0.8),
    inset 10px 10px 10px 0 rgba(0, 0, 0, 0.2);
  transition: 0.4s linear;
}

.header:hover {
  box-shadow: -6px -6px 10px 0 rgba(205, 177, 255, 0.8),
    10px 10px 10px 0 rgba(0, 0, 0, 0.08);
  transform: translateX(-50%) scale(1.1);
}

.header img {
  position: absolute;
  height: 90%;
  width: 90%;
  border-radius: 50%;
  object-fit: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.body {
  position: absolute;
  top: 100px;
  padding: 15px;
  color: white;
}

.body h2 {
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.body p {
  font-size: 10px;
  line-height: 20px;
}

.footer {
  position: absolute;
  bottom: 10px;
  width: 100%;
  height: 60px;
}
.footer button {
  position: absolute;
  border: none;
  background: #b19cd9;
  color: white;
  padding: 8px 25px;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset -6px -6px 10px 0 rgba(205, 177, 255, 0.8),
    inset 6px 6px 10px 0 rgba(0, 0, 0, 0.1);
  transition: 0.4s linear;
}

.footer:hover button {
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: -6px -6px 10px 0 rgba(205, 177, 255, 0.7),
    6px 6px 10px 0 rgba(0, 0, 0, 0.1);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.