# Creating Circles using Radial Gradients

**URL:** <https://forum.kirupa.com/t/creating-circles-using-radial-gradients/643020>\
**Category:** programming\
**Created:** [May 30, 2020, 5:04am UTC](https://forum.kirupa.com/t/creating-circles-using-radial-gradients/643020 "2020-05-30T05:04:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 30, 2020, 5:04am UTC](https://forum.kirupa.com/t/creating-circles-using-radial-gradients/643020/1 "2020-05-30T05:04:54Z")

</div>

This is a companion discussion topic for the original entry at [https://www.kirupa.com/css/circles\_radial\_gradient.htm](https://www.kirupa.com/css/circles_radial_gradient.htm)

---

<div class="post-metadata">

**Author:** ![Morteza](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/morteza/32/16261_2.png) [@Morteza](https://forum.kirupa.com/u/Morteza)\
**Post date:** [December 16, 2021, 9:11am UTC](https://forum.kirupa.com/t/creating-circles-using-radial-gradients/643020/2 "2021-12-16T09:11:01Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient())**

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 17, 2021, 5:32am UTC](https://forum.kirupa.com/t/creating-circles-using-radial-gradients/643020/3 "2021-12-17T05:32:17Z")

</div>

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):

```auto
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](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/8/4/8421e260663b27cde859fd900fc5c6c6488a09cc.png)

😛

---

<div class="post-metadata">

**Author:** ![Morteza](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/morteza/32/16261_2.png) [@Morteza](https://forum.kirupa.com/u/Morteza)\
**Post date:** [December 17, 2021, 8:50am UTC](https://forum.kirupa.com/t/creating-circles-using-radial-gradients/643020/4 "2021-12-17T08:50:44Z")

</div>

> [@kirupa](#):
>
> the size at the beginning where the value seems like it should be the radius, but it is actually the full width

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 17, 2021, 6:02pm UTC](https://forum.kirupa.com/t/creating-circles-using-radial-gradients/643020/5 "2021-12-17T18:02:49Z")

</div>

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!!! 🙂