<div class="rotated_gradient_box"></div>
.rotated_gradient_box {
filter: hue-rotate(360deg);
width: 200px;
height: 100px;
border-radius: 21px;
border: 10px solid transparent;
background-image: linear-gradient(#444, #444), linear-gradient(to left,#37a9fa,#5951f3);
background-clip: content-box, border-box;
background-origin: border-box;
animation: huerotate 6s infinite linear;
}
@keyframes huerotate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.