@propertyを使用して、ホバーするとグラデーションが回るアニメーション。
内側の背景を透過することで、後ろのグラデーションを透かし、ネオンぽさを強調

  @property --gradient-angle {
    syntax: "<angle>";
    initial-value: 45deg;
    inherits: true;
  }
  @keyframes gradient-angle {
    0% {
      --gradient-angle: 45deg;
    }
    100% {
      --gradient-angle: 405deg;
    }
  }
  .box {
    position: relative;
    display: grid;
    place-content: center;
    width: 300px;
    aspect-ratio: 1;
    margin-inline: auto;
  }
  .box::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: -1px 0 0;
    background-color: #fa8bff;
    background-image: linear-gradient(
      var(--gradient-angle),
      #fa8bff 0%,
      #2bd2ff 52%,
      #2bff88 90%
    );
    transition: scale 0.2s ease-in;
  }
  .box::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(1, 1, 28, 0.75),
      #01011c 0.75rem
    );
  }
  .box:hover::before {
    scale: 1.03;
    animation: gradient-angle 5s linear infinite;
  }