Creating Circles using Radial Gradients

programming
1
This is a companion discussion topic for the original entry at https://www.kirupa.com/css/circles_radial_gradient.htm
2

The “width” in your article is not actually the width (diameter) of the circle — It’s the radius:

If <ending-shape> is specified as circle , the size may be given explicitly as a <length>, which provides an explicit circle radius.

SOURCE

3

Hi @Morteza - welcome to the forums :slight_smile:

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:

image
image1162Ă—962 4.43 KB

:stuck_out_tongue:

4

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%);

5

You are right! I totally missed that detail because I was fixated on the final size of the circle! :doh:

I have updated the article with a Note at the bottom adding your correction! Thanks for letting me know!!! :slight_smile:

1 Like