The “width” in your article is not actually the width (diameter) of the circle — It’s the radius:
<ending-shape>is specified as
circle, the size may be given explicitly as a
<length>, which provides an explicit circle radius.
Hi @Morteza - welcome to the forums
The syntax for radial gradients has several variations. In the approach I am using, I specify the size at the beginning where the value seems like it should be the radius, but it is actually the full width (diameter):
background: radial-gradient(30px circle at 50px 200px, #E71D36 50%, transparent 51%);
In this example, the 30px is the full width and we can verify this by measuring the output:
The result you get is a circle that’s
60px wide, but since you have colored only half of it, it seems to be
30px. The right coding is:
background: radial-gradient(circle 15px at 50px 200px, #E71D36 100%, transparent 101%);
You are right! I totally missed that detail because I was fixated on the final size of the circle!
I have updated the article with a Note at the bottom adding your correction! Thanks for letting me know!!!