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

Firefox not support it https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient — Rayees AC, Oct 08 '20 at 07:33
Sounds like a bug with HWA (Hardware Acceleration), disabling it in `chrome://settings/?search=hardware+acceleration` makes it look sharp You may want to report it: https://bugs.chromium.org/p/chromium/issues — Kaiido, Oct 08 '20 at 07:34
@Kaiido thanks. I will report. I ended up making an svg and using it instead. — Noiseymur, Oct 08 '20 at 08:57

score 0 · Answer 1 · answered Oct 08 '20 at 10:16

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>

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

1 Answers1