Glossy payment

.card-087 {
  position: relative;
  width: 320px;
  height: 200px;
  padding: 22px 24px;
  box-sizing: border-box;
  border-radius: 18px;
  background: linear-gradient(135deg,#1e1b4b,#4c1d95 50%,#0f172a);
  color: #fff;
  font-family: system-ui,sans-serif;
  box-shadow: 0 20px 40px -12px rgba(76,29,149,.6);
  overflow: hidden;
  transition: transform .3s
}
.card-087::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -100px;
  top: -120px;
  border-radius: 50%;
  background: rgba(255,255,255,.07)
}
.card-087:hover {
  transform: translateY(-4px) rotate(-1deg)
}
.card-087__top {
  display: flex;
  justify-content: space-between;
  align-items: center
}
.card-087__chip {
  width: 42px;
  height: 30px;
  border-radius: 6px;
  background: linear-gradient(135deg,#fde68a,#d97706);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2)
}
.card-087__top b {
  font-size: 14px;
  letter-spacing: .2em
}
.card-087__num {
  margin: 28px 0 22px;
  font-family: ui-monospace,monospace;
  font-size: 20px;
  letter-spacing: .14em
}
.card-087__bottom {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600
}
.card-087__bottom span {
  display: flex;
  flex-direction: column
}
.card-087 small {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 2px
}

<div class="card-087">
  <div class="card-087__top"><span class="card-087__chip"></span><b>BANK</b></div>
  <p class="card-087__num">•••• •••• •••• 4242</p>
  <div class="card-087__bottom"><span><small>Card holder</small>A. Example</span><span><small>Expires</small>09/29</span></div>
</div>