CSS Radial Gradients

A radial gradient is where colors gradually emerge from a single point and smoothly spread outward in a circular or elliptical shape. This is in contrast to a linear gradient, where the colors blend across a linear line.

Below are examples of radial gradients.

Basic Radial Gradient

This example demonstrates what a basic radial gradient looks like. Here, we've specified two colors (lightyellow and gold).

Circular Gradient

In the above example, the gradient shape changes depending on the containing box. If the box is rectangular, the gradient is an ellipse. If the box is square, then the gradient is a perfect circle.

In this example, the gradient is always a perfect circle. This is because we've added the circle keyword. This keyword ensures that the ellipse is a circle despite its outer box.

Rainbow Gradient

Here, we add many colors to give our gradient that "rainbow" look. Seeing as the colors of the rainbow are red, orange, yellow, green, blue, indigo, violet, these are the colors we specify in the gradient.

We also start the gradient from the bottom of the box, as opposed to the center.

Color Stops

You can specify the exact location of each color stop. A color stop is a point in the gradient that has the specified color value. To specify the location of a color stop, you simply add the location as a percentage value (eg, 20%) or a length value (eg, 20px).

In this example, the first color stop is located 0 pixels (i.e. 0px), the second color stop is 80 pixels (80px), and the third is 130 pixels (130px).

Repeating Gradients

You can use the repeating-radial-gradient function to make the gradient repeat multiple times across the element.

You can also create a sharp transition betweeen colors. To do this, just make the start color different to the last color:

Here's another example:

And another: