When I picture a sun, I see a yellow circle giving off rays of light. As these light rays travel away from the sun, they become less visible and gradually fade into the background. I create the same effect by drawing a circle and filling it with a radial gradient. A linear gradient changes color as we move along a straight line. A radial gradient changes color as we move along the radius of a circle.
When we tell the browser to draw a circle, we have to specify the radius and coordinates of the circle. For rectangles, the coordinates describe the position of the top left corner of the rectangle. For circles, the coordinates describe the position of the center of the circle.
Circle: x-coordinate: , y-coordinate: , radius:
To create a radial gradient, we need to define at least two color stops. Since the radius of my sun is 200 pixels, I set an opaque yellow color stop at 100 pixels and a transparent white color stop at 200 pixels.
Color stop 1 (radius: ): red: , green: , blue: , alpha:
Color stop 2 (radius: ): red: , green: , blue: , alpha:
You may have noticed that I’m defining my colors with a fourth parameter: in addition to red, green, and blue light intensity, there is now an alpha value. Alpha values range from 0 to 1. An alpha value of 0 means a color is completely transparent. An alpha value of 1 means a color is completely opaque. With these color stops, I’m telling the computer to fill the sun with a solid yellow color from the center out to a radius of 100, and then to gradually change the fill color from a solid yellow to a transparent white from a radius of 100 out to a radius of 200.