CSS radial-gradient() function

Previous Page CSS pow() function
Next Page CSS ray() function
Go Up One Level CSS Function Reference Manual

Definition and usage

CSS radial-gradient() The function sets the radial gradient as the background image.

The radial gradient is defined by its center.

To create a radial gradient, you must define at least two color markers.

Example of radial gradient:

Instance

Example 1

Radial gradient with uniform color marker distribution:

#grad {
  background-image: radial-gradient(red, green, blue);
}

Try it yourself

Example 2

Radial gradient with different color marker distribution:

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

Try it yourself

Example 3

Radial gradients with circular shapes:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Try it yourself

Example 4

Radial gradients with different size keywords:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

Try it yourself

CSS syntax

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

Value	Description
shape	Define the shape of the gradient. Possible values: ellipse (default) circle
size	Define the size of the gradient. Possible values: farthest-corner (default) closest-side closest-corner farthest-side
position	Define the position of the gradient. The default value is "center".
start-color, ... , last-color	Color stops are the colors you want to display smooth transitions between. This value consists of a color value followed by one or two optional color stop positions (percentages between 0% and 100% or lengths along the gradient axis).