<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.