body{
  margin: 0;
  padding: 0;
  background: #0e2136;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box{
    background: #142d4a;
    height: 200px;
    aspect-ratio: 1/1;
    border-radius: 10px:
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.box::before,
.box::after{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: conic-gradient{
      from var(--deg) at center,
      from 0deg at center,
      #00c3ff.
      #4d0199.
      #6300c6,
      #009dcd
    };
    border-radius: inherit;
    z-index: -2;
    padding: 2px;
    animation: autoRotate 2s linear infinite;
}
.box::after{
  filter: blur(10px);
}

@keyframes autoRotate {
  to{
    --deg: 360deg;
  }
}