CSS Creating Gradients (Radial Gradients)

CSS Radial Gradients

A radial gradient is defined by its center.

To create a radial gradient you must also define at least two color stops.

Syntax

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

By default, shape is ellipse, size is farthest-corner, and position is center.

Radial Gradient - Evenly Spaced Color Stops (this is default)

The following example shows a radial gradient with evenly spaced color stops:

Example

#grad {
background-image: radial-gradient(blue, lightblue, lightgreen);
}

Radial Gradient - Differently Spaced Color Stops

The following example shows a radial gradient with differently spaced color stops:

Example

#grad {
background-image: radial-gradient(blue 5%, lightyellow 15%, lightgreen 60%);
}

Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.

The following example shows a radial gradient with the shape of a circle:

Example

#grad {
background-image: radial-gradient(circle, blue, lightblue, lightgreen);
}

Use of Different Size Keywords

The size parameter defines the size of the gradient. It can take four values:

• closest-side
• farthest-side
• closest-corner
• farthest-corner

Size with Position

The position of the gradient, interpreted in the same way as background-position or transform-origin. If unspecified, it defaults to center.

Keyword	Description
closest-side	The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
closest-corner	The gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center.
farthest-side	Similar to closest-side, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
farthest-corner	The default value, the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center.

Example

A radial gradient with different size keywords:

#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, blue, lightyellow, darkblue);
}

#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, blue, lightyellow, darkblue);
}

Repeating a radial-gradient

The repeating-radial-gradient() function is used to repeat radial gradients:

The repeating-radial-gradient() CSS function creates an image consisting of repeating gradients that radiate from an origin. It is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

With each repetition, the positions of the color stops are shifted by a multiple of the dimensions of the basic radial gradient (the distance between the last color stop and the first). Thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition, which can be removed by repeating the first color as the last color.

As with any gradient, a repeating radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

Because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. For this reason, repeating-radial-gradient() won't work on background-color and other properties that use the <color> data type.

Example

A repeating radial gradient:

#grad {
background-image: repeating-radial-gradient(circle, blue, lightyellow 10%, darkgreen 15%);
}