Prismatic Light Sweep | Learning Axis

HTML

CSS

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at top, #111, #050505);
  overflow: hidden;
  font-family: system-ui, sans-serif;
}
.prism {
  width: 320px;
  height: 420px;
  border-radius: 24px;
  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.02)
      );
  position: relative;
  backdrop-filter: blur(14px);
  box-shadow:
    0 40px 80px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.15);
  overflow: hidden;
}
.prism::before {
  content: "";
  position: absolute;
  inset: -200%;
  background: linear-gradient(
    60deg,
    transparent,
    #ff00ff,
    #00ffff,
    #ffff00,
    transparent
    );
  animation: sweep 6s linear infinite;
  opacity: 0.8;
  mix-blend-mode: overlay;
}
.prism::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left,
    rgba(255,255,255,0.25),
    transparent 60%);
  pointer-events: none;
}
@keyframes sweep {
  from {
    transform: rotate(0deg) translateX(-50%);
  }
  to {
    transform: rotate(360deg) translateX(-50%);
  }
}
.label {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  color: rgba(255,255,255,0.8);
  letter-spacing: 3px;
  font-size: 12px;
}