CSS Radial-Gradient Property

In a radial gradient background, there is a starting point, and the color gradually transitions from that point to the boundary in all directions. The radial-gradient property in CSS controls how this type of gradient is displayed as the background. The shape of a radial gradient is either a circle or an eclipse, hence the name radial. The syntax for radial-gradient is as follows:

background: radial-gradient(<arguments>); OR background-image: radial-gradient(<arguments>);

<arguments> are variables that specify what the linear gradient would exactly look like. There are several types of arguments for radial-gradient, including color, shape, starting point, and boundary condition. Below are examples that illustrate commonly-used arguments:

Example 1: Simple radial gradient

CSS Declaration

background: radial-gradient (red,yellow);

Result:

This is the most simple way to specify a radial-gradient property. We note two default behaviors:

1. The default starting position is the center of the element.
2. The default shape of the background gradient is an eclipse, as the element is a rectangle. If the element is a square, the default shape of the background gradient would be a circle.

Example 2: Specify shape

CSS Declaration

background: radial-gradient (circle,red,yellow);

Result:

We can specify the shape of the radial gradient to override the default. The possible values are "circle" and "eclipse."

Example 3: Multiple colors

CSS Declaration

background: radial-gradient (red,white,yellow);

Result:

The radial gradient can contain more than two colors. In Example 3, we show a radial gradient with three colors specified.

Example 4: Different starting position

CSS Declaration

background: radial-gradient (50px 50px,red,yellow);

Result:

In Example 4, the starting position of the radial gradient is a point 50px from the top and 50px from the left. This is why, compared to the background image in Example 1, the radial gradient here appears to shift towards the upper left and more spread out.

Speaking of spreading out, radial-gradient does offer four ways to control the amount of fading. They are as follows:

• closest-side: the fading concludes at the closest side to the starting point.
• closest-corner: the fading concludes at the closest corner to the starting point.
• farthest-side: the fading concludes at the farthest side to the starting point.
• farthest-corner: the fading concludes at the farthest corner to the starting point.

It is easiest to see examples, as shown below:

Example 5: closest-side

CSS Declaration

background: radial-gradient (circle closest-side,red,yellow);

Result:

In Example 5, the top and bottom ends of the circle touches the top and bottom of the element, as these are the closest sides to the starting point, which is the center of the element. Notice that the circle does not extend out to the left and right edges of the element.

Example 6: farthest-side

CSS Declaration

background: radial-gradient (circle farthest-side,red,yellow);

Result:

In Example 6, the circle touches the right and left edge of the element, as these are the farthest sides to the starting point. Notice that the circle extends beyond the top and bottom of the element.

Example 7: cloest-corner

CSS Declaration

background: radial-gradient (circle closest-corner at 50px 50px,red,yellow);

Result:

To illustrate the closest-corner concept, we set the starting point at 50px 50px, which is in the element's upper left quadrant. Notice that the circle touches the upper left corner of the element, as that is the closest corner to the starting point.

Example 8: farthest-corner

CSS Declaration

background: radial-gradient (circle farthest-corner at 50px 50px,red,yellow);

Result:

Example 8 has the same starting point as Example 7. Notice the circle appears now quite spread out, as its radius now runs from the upper left quadrant to the lower right corner of the element.

Also, notice that Example 8 produces the same result as Example 4. This shows that the default value used to control the amount of fading is farthest-corner.