<div class="site-container">
  <div class="card card--center">
    <p>A card component styled with a combination of `box-shadow` and `text-shadow` property.</p>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #e0e5ec;
  font: 1em/1.5 Lexend, sans-serif;
}

.site-container {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 2rem;
}

.card {
  max-width: 28rem;
  border-radius: 0.5rem;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px white;
  padding: 2rem;
  color: #764abc;
  text-shadow: -6px 6px 15px rgba(0, 0, 0, 0.5),
    6px -6px 15px rgba(255, 255, 255, 0.8);
}

.card--center {
  text-align: center;
}