CSS radial-gradient() function

CSS Functions

Example

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

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

Try it Yourself »

Definition and usage

The radial-gradient() function uses a radial gradient to create an "image".

A radial gradient is defined by its center point.

To create a radial gradient you must set two color stops.

Radial Gradient Example

Supported version: CSS3

Browser Support

The numbers in the table indicate the first browser version number that supports the function.

The number specified by "webkit", "moz", or "o" is the first version number prefix that supports the function.

Function
radial-gradient() 26.0
10.0 -webkit-		 10.0 16.0
3.6 -moz-		 6.1
5.1 -webkit-		 12.1
11.6 -o-

CSS Syntax

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Value Description
shape Determine the circle type:
  • ellipse (default): Specifies an elliptical radial gradient.
  • circle: Specifies a circular radial gradient.
size Defines the size of the gradient. Possible values:
  • farthest-corner (default): Specifies the radius length of the radial gradient as the distance from the center to the farthest corner from the center.
  • closest-side: Specifies the radius length of the radial gradient as the distance from the center to the closest side from the center.
  • closest-corner: Specifies the radius length of the radial gradient as the distance from the center to the closest corner from the center.
  • farthest-side: Specifies the radius length of the radial gradient as the distance from the center to the farthest side from the center.
position Defines the position of the gradient. Possible values:
  • center(default): Sets the middle as the y-coordinate value of the radial gradient center.
  • top: Sets the y-coordinate value with the top as the center of the radial gradient.
  • bottom: Sets the y-coordinate value with the bottom as the center of the radial gradient.
start-color, ..., last-color Used to specify the start and end colors of the gradient.

More Examples

Example

Color stops unevenly distributed:

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

Try it Yourself »

Example

Circular radial gradient:

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

Try it Yourself »

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

Try it Yourself »

CSS Tutorial:CSS3 Gradients

CSS Functions

other extensions