How to fix jagged edges on conic-gradient

Question

I got a progress bar that I build using conic-gradient, but its edges look not sharp. I've found some suggestions online but none of them seem to work so far. Here is the fiddle of the whole progress bar.

 background-image: conic-gradient(
    transparent var(--min-degrees),
    #00ACEE var(--min-degrees) var(--progress, 0),
    transparent var(--progress, 0)
  );

Any idea how I can smooth its edges?

Thanks

Answer 1

You do not state in your question which browser you are using, but I can reproduce the issue in Chromium 118. The problem is that Chromium does not anti-alias CSS gradients. The corresponding bug report is here. This was first filed over 9 years ago, and there is still no fix.

As others have commented, you can implement a small amount of blending between the hard stops as a workaround. You can use calc() in CSS gradients, which makes this easier.

I am also seeing this issue on Firefox. I submitted a report here.

Answer 2

// BEFORE:
conic-gradient(#000000 80%, #ffffff 0)

//AFTER
conic-gradient(#000000 80%, #ffffff 80.15%)