* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #222534;
}

@property --direc {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin {
  0% {}

  100% {
    --direc: 360deg;
  }
}

.box {
  --direc: 0deg;
  width: 480px;
  height: 800px;
  border-radius: 12px;
  margin: 60px auto;
  position: relative;
  background: linear-gradient(var(--direc), #5ddcff, #3c67e3 43%, #4e00c2);
}

.box:hover {
  animation: spin 4s linear infinite;
  cursor: pointer;
}

.box::before {
  content: "";
  position: absolute;
  inset: 0px;
  background: inherit;
  border-radius: inherit;
  filter: blur(8px);
}

.box span {
  display: block;
  inset: 8px;
  padding: 32px;
  background-color: #191c29;
  position: absolute;
  border-radius: 8px;
  color: #DDD;
  font-size: 32px;
  font-weight: bolder;
}