Radial-gradient doesn't create perfect circles

HTML & CSS
1

Sample code:

CSS

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

HTML

<div></div>

DEMO

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

2

The transition from blue to pink happens at the exact same place (50%) making an abrupt change of colour.
So what you see as jagged are actual pixels with no anti-aliasing.
Here I offset the the pink by 0.5% to make a very thin gradient and mimics anti-aliasing.

5 Likes
3

It doesn’t work on small circles. For example:

div {
  width: 20px;
  height: 20px;
}
1 Like
4

You’d need to up the percentage up a bit to about 56% on the pink for small circles although that circle’s so small I can’t really see it anyway :slight_smile:

1 Like
5

Think about it mathematically. The 400px circle has a radius of 200px, 0.5% of 200px is 1px, about right to get an anti alias effect.
The 20px circle’s radius is 10px, 0.5% of that is 0.05px, which is effectively nothing as far as pixels are concerned.

2 Likes
6

You may be able to get away with calc?

e.g.


div {
  width:20px;
  height: 20px;
  background: radial-gradient(circle, blue 50%, pink calc(50% + 1px));
}
2 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.