Animated Light & Shadow | Learning Axis

HTML

CSS

,
*::after,
*::before {box-sizing: border-box}
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --distX {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --distY {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --duration {
  syntax: "<time>";
  inherits: false;
  initial-value: 10s;
}
body {
  background: #6E6553;
  display: grid;
  place-items: center;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  &::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    width: 150vmax;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at bottom center, #fff9, #fff0 80%);
    transform: translate(-50%, -50%) rotate(var(--angle));
    backdrop-filter: blur(2px);
    z-index: -1;
    animation: rotate var(--duration) linear infinite;
  }
}
.plate {
  width: 300px;
  padding: .5rem;
  aspect-ratio: 1;
  corner-shape: superellipse(1.75);
  border: 2px solid transparent;
  border-radius: 500px;
  background:
    linear-gradient(var(--angle), #246890, #123450),
    linear-gradient(var(--angle), #3babed, #071521);
  background-clip: padding-box, border-box;
  background-origin: border-box;
  box-shadow:
    calc(var(--distX) * -1px) calc(var(--distY) * -1px) 20px #24689022,
    calc(var(--distX) * 1px) calc(var(--distY) * 1px) 20px #000000,
    inset calc(var(--distX) * 1px) calc(var(--distY) * 1px) 30px #07152177,
    inset calc(var(--distX) * -1px) calc(var(--distY) * -1px) 30px #3babed77;
  animation: rotate var(--duration) linear infinite, dist var(--duration) infinite linear;
}
@keyframes rotate {
  from { --angle: 0deg }
  to { --angle: 360deg }
}
@keyframes dist {
  0%, 100% {
    --distX: 0;
    --distY: -10;
  }
  25% {
    --distX: 10;
    --distY: 0;
  }
  50% {
    --distX: 0;
    --distY: 10;
  }
  75% {
    --distX: -10;
    --distY: 0;
  }
}