— by Eva
Radial gradients create a transition of colors radiating from an origin, often forming circles or ellipses. The syntax for a radial gradient begins with radial-gradient(), where you can specify the shape, size, and position. For instance, circle closest-side keeps the circle within the nearest side of the element’s box, while circle farthest-side stretches it to the farthest side. Note that the order you declare these properties in matters. In a radial gradient, the order must be: size and shape (e.g., circle or ellipse), position (at x% y%), followed by the color stops.
The background-repeat property controls how the gradient is repeated across an element, allowing options like repeating it both horizontally and vertically (repeat), along only one axis (repeat-x or repeat-y), not repeating it at all (no-repeat), spacing it evenly (space), or scaling it to fill the element without gaps (round). These values provide flexibility in displaying background images.