CSS radial-gradient() Function

CSS Functions

Example

The following example demonstrates a radial gradient with evenly distributed color stops:

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

Definition and Usage

The radial-gradient() function creates an image consisting of a radial gradient.

A radial gradient is defined by its center.

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

Radial Gradient Example

Supported Version: CSS3

Browser Support

The numbers in the table specify the first browser version that fully supports the function.

Prefixes "webkit", "moz", or "o" indicate the first version that supported the function with a prefix.

Function	Chrome	Edge	Firefox	Safari	Opera
radial-gradient()	26.0 <br>10.0 -webkit-	10.0	16.0 <br>3.6 -moz-	6.1 <br>5.1 -webkit-	12.1 <br>11.6 -o-

CSS Syntax

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

Value	Description
shape	Determines the type of circle: ellipse (default): Specifies an elliptical radial gradient. <br>circle: Specifies a circular radial gradient.
size	Defines the size of the gradient. Possible values: farthest-corner (default): Specifies the radius length from the center to the farthest corner. <br>closest-side: Specifies the radius length from the center to the closest side. <br>closest-corner: Specifies the radius length from the center to the closest corner. <br>farthest-side: Specifies the radius length from the center to the farthest side.
position	Defines the position of the gradient. Possible values: center (default): Sets the center as the vertical coordinate of the gradient's circle. <br>top: Sets the top as the vertical coordinate of the gradient's circle. <br>bottom: Sets the bottom as the vertical coordinate of the gradient's circle.
start-color, ..., last-color	Specifies the start and end colors of the gradient.

More Examples

Example

Unevenly distributed color stops:

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

Example

Circular radial gradient:

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

Example

Using 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);
}

CSS Tutorial: CSS3 Gradients

CSS Functions

❮ Func Repeating Conic Gradient Pr Border Left Color ❯