박스 리플렉트

<div class="pair">
  <div class="item"><div class="card reflect">A</div><span class="cap">-webkit-box-reflect</span></div>
  <div class="item"><div class="fallback-wrap"><div class="card">B</div><div class="card fallback-copy" aria-hidden="true">B</div></div><span class="cap">scaleY(-1) + mask-image</span></div>
</div>

.pair{display:flex;gap:16%}
.item{display:flex;flex-direction:column;align-items:center;gap:46px}
.card{position:relative;width:20vmin;max-width:88px;aspect-ratio:3/4;border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg,#5b5bf7,#18c29c);display:grid;place-items:center;color:#fff;font:800 22px/1 sans-serif}
.card::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);animation:sweep 2.4s ease-in-out infinite}
@keyframes sweep{to{transform:translateX(120%)}}
.reflect{-webkit-box-reflect:below 6px linear-gradient(transparent 40%,rgba(255,255,255,.35))}
.fallback-wrap{position:relative}
.fallback-copy{position:absolute;left:0;top:calc(100% + 6px);transform:scaleY(-1);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,transparent 60%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,transparent 60%);pointer-events:none}
.cap{font:600 11px/1.3 monospace;color:var(--muted);text-align:center}