Why the result of conical-gradient becomes as blurry as it gets away from the center?

Question

I applied a conical gradient to circular div and this is the result. I want the color borders stay sharp as it is in the center or between first and last sections. How can I achieve that ?

.n1st-circle-menu {
    background: conic-gradient(

        #cf7fb7 0%, #cf7fb7 6.25%, 
        #a00071 6.25%, #a00071 12.5%, 
        #cf7fb7 12.5%, #cf7fb7 18.75%, 
        #a00071 18.75%, #a00071 25%,
        #cf7fb7 25%, #cf7fb7 31.25%,
        #a00071 31.25%, #a00071 37.5%, 
        #cf7fb7 37.5%, #cf7fb7 43.75%,
        #a00071 43.75%, #a00071 50%, 
        #cf7fb7 50%, #cf7fb7 56.25%,
        #a00071 56.25%, #a00071 62.5%, 
        #cf7fb7 62.5%, #cf7fb7 68.75%,
        #a00071 68.75%, #a00071 75%, 
        #cf7fb7 75%, #cf7fb7 81.25%,
        #a00071 81.25%, #a00071 87.5%, 
        #cf7fb7 87.5%, #cf7fb7 93.75%,
        #a00071 93.75%, #a00071 100%

        
        ) 50% 50% / 100% 100% no-repeat;
    width: 800px;
    height: 800px;
    border-radius: 50%;
}

<div class="n1st-circle-menu"></div>

Please have a look at the result here

Answer 1

Try a repeating gradient it may look better:

.n1st-circle-menu {
  background: 
    repeating-conic-gradient(
      #cf7fb7 0 calc(360deg/16), 
      #a00071 0 calc(360deg/8));
  width: 800px;
  height: 800px;
  border-radius: 50%;
}

<div class="n1st-circle-menu"></div>