A radial gradient is defined by a center point, an ending shape, and two or more color-stop points.
To create a smooth gradient, the
radial-gradient() function draws a series of concentric shapes radiating out from the center to the ending shape (and potentially beyond). The ending shape may be either a circle or an ellipse.
Color-stop points are positioned on a virtual gradient ray that extends horizontally from the center towards the right. Percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents
100%. Each shape is a single color determined by the color on the gradient ray it intersects.