<div class="card button"></div>
<div class="card sun"></div>
<div class="card wish"></div>
<div class="card coin"></div>
<div class="card activity"></div>

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  width: 20vw;
  min-height: 20vh;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px 72px 12px 12px;
  border: 1px solid transparent;
  font-size: 24px;
  background-repeat: no-repeat;
  padding: 70px 18px 18px;
  margin: 5px;
  background-size: 28px 28px, 49px 49px, 103px 103px, cover;
  background-position: calc(100% - 20px) calc(100% - 20px),
    calc(100% + 10px) calc(100% + 10px), -34px -28px, 0 0;
}

.button {
  background-image: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.2) 70%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.2) 70%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.3) 70%,
      rgba(255, 255, 255, 0) 70%
    ),
    linear-gradient(180deg, #ffe3ae 0%, #ffd34f 100%);
  border-color: rgba(184, 112, 0, 0.28);
  box-shadow: 0 8px 12px 0 rgba(234, 165, 55, 0.3),
    inset 0 1px 3px 0 rgba(255, 255, 255, 0.5);
  color: #870000;
}

.sun {
  background-image: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.2) 70%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.2) 70%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.3) 70%,
      rgba(255, 255, 255, 0) 70%
    ),
    linear-gradient(180deg, #dcfa86 0%, #55e290 100%);
  border-color: rgba(0, 184, 59, 0.28);
  box-shadow: 0 8px 12px 0 rgba(97, 234, 237, 0.3),
    inset 0 1px 3px 0 rgba(255, 255, 255, 0.5);
  color: #005a49;
}

.wish {
  background-image: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.2) 70%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.2) 70%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.3) 70%,
      rgba(255, 255, 255, 0) 70%
    ),
    linear-gradient(180deg, #ffdbdb 0%, #ff9e9e 100%);
  border-color: rgba(92, 0, 0, 0.07);
  box-shadow: 0 8px 12px 0 rgba(255, 138, 138, 0.3),
    inset 0 1px 3px 0 rgba(255, 255, 255, 0.5);
  color: #870000;
}

.coin {
  background-image: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.2) 70%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.2) 70%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.3) 70%,
      rgba(255, 255, 255, 0) 70%
    ),
    linear-gradient(180deg, #91c8ff 0%, #af5fff 100%);
  border-color: rgba(92, 0, 0, 0.07);
  box-shadow: 0 8px 12px 0 rgba(138, 173, 255, 0.3),
    inset 0 1px 3px 0 rgba(255, 255, 255, 0.5);
  color: #fff;
}

.activity {
  background-image: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.1) 70%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.1) 70%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.3) 70%,
      rgba(255, 255, 255, 0) 70%
    ),
    linear-gradient(180deg, #ffb766 0%, #ff1275 100%);
  border-color: rgba(222, 38, 38, 0.28);
  box-shadow: 0 8px 12px 0 rgba(234, 113, 96, 0.3),
    inset 0 1px 3px 0 rgba(255, 255, 255, 0.5);
  color: #fff;
}