<div class="crcl-animate"></div>
$primary-color: #012837; //midnight blue
$secondary-color: #04a3a0; //light teal
$tertiary-color: #05abe0; //near-black
$accent-color: #001729; //teal

body {
  background: $primary-color;
  margin:0;
  padding:0;
  
  display: flex;
  justify-content: center;
}

.crcl-animate {
  position: relative;
  top: 5em;
  width: 40vh;
  height: 40vh;
  border-radius: 100px;
  background: linear-gradient(to top right ,$accent-color, $primary-color);
}

.crcl-animate:before,
.crcl-animate:after {
    content: "";
    position: absolute;
    left: -1vh;
    top: -1vh;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,$secondary-color), color-stop(40%,$accent-color), color-stop(100%,#05abe0));
    
    border-radius: 100px;
    background-size: 300%;
    width: calc(100% + 2vh);
    height: calc(100% +  2vh);
    z-index: -1;
  
    animation: cycle 20s linear infinite;
}

.crcl-animate:after {
  filter: blur(2vh);
}
@keyframes cycle {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 300% 0;

  }
  100% {
    background-position: 0 0;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.