Build a Holographic Shine Profile Card (Source Code)

Trading cards like Pokémon often have “holo” variants where shimmering pastel light rakes across the cardboard when tilted. We can perfectly replicate this using massive CSS linear-gradient overlays!

The Iridescent Sweep

We make a background 300% wider than the card, painted with an RGB rainbow. We then animate background-position to physically slide that rainbow across the card face. Adding mix-blend-mode: overlay integrates it into the actual photo underneath!

.holo-card {
  position: relative;
  overflow: hidden;
}

.holo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.5) 30%,
    rgba(255, 0, 255, 0.4) 40%,
    rgba(0, 255, 255, 0.4) 50%,
    transparent 60%
  );
  background-size: 300% 300%;
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity 0.5s;
}

.holo-card:hover::after {
  opacity: 1;
  animation: holoSweep 2s infinite linear;
}

@keyframes holoSweep {
  0% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

Try hovering over the incredibly premium employee profile photo in the Live Demo!