Radial-gradient doesn’t create perfect circles-CodePudding

Sample code:

div {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, blue 50%, pink 50%);
}

<div></div>

The edges of the circle are jagged. How can I completely round it?

CodePudding user response：

There are a few solutions to this, discussed in this Medium article by Mandy Michael.

One elegant one is to use calc to add a single pixel of the second color, as seen below, which renders enough blur to offset the jaggedness.

div {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, blue 50%, pink calc(50%   1px));
}

<div></div>

CodePudding user response：

I added 0.5% on the pink and it kind of smoothed out the edges. Hope that's what you are looking for.

div {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle at 50%, blue 50%, pink 50.5%);
}

<div></div>