How can I rotate a conic gradient-CodePudding

Is there a way to make the bar on the conic gradient rotate infinitely in a circle? This is how the gradient looks, I just want it to rotate around the center but everything I have tried hasn't worked.

CodePudding user response：

If I understand what you want, just make sure you have (at least) 3 colours, and the final colour is the same as the first

P.S. I added rotation because wasn't sure what you meant by infinite rotation

div {
position:relative;
height:200px;
overflow:hidden;
aspect-ratio: 1 / 1;
border: solid black 1px;
clip-path: border-box;
}
div::before {
z-index:-1;
content:'';
position:absolute;
inset: -25%;
background-image: conic-gradient(
    hsl(297.3, 84.6%, 20.4%),
    hsl(192.6, 51.4%, 58.0%),
    hsl(297.3, 84.6%, 20.4%)
);
animation: 3s linear infinite rot;
}
@keyframes rot {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div>Hello World</div>

CodePudding user response：

make sure the syntax like this

background-image: conic-gradient(from 45deg, #6e7dab, #5762d5);

source : conic gradient