# radial-gradient function

The `radial-gradient` function specifies a radial gradient. It applies to properties that specify a background image: `background`, `background-image` or border image: `border-image`, `background-image-source`.

## Syntax

`selector { background: radial-gradient([shape type position], color1 length1, color2 length2...); }`

## Values

Value | Description
--- | ---
shape | Accepted values: `ellipse` - elliptical gradient (default), `circle` - circular gradient.
type | Sets a gradient extent. Accepted values: `closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`.
position | After the `at` keyword, the position is indicated in any size units or using the `top`, `bottom`, `left`, `right`, `center` keywords in various combinations.
color1 | The starting color of the gradient in any color units.
color2 | The ending color of the gradient in any color units.
length | Sets the extent of a specific gradient color in any size units.

## Values ​​for type

Value | Description
--- | ---
`closest-side` | The gradient shape matches the side of the block closest to it.
`closest-corner` | The gradient shape is calculated based on information about the distance to the nearest corner of the block.
`farthest-side` | The gradient extends to the far side of the block.
`farthest-corner` | The gradient shape is calculated based on information about the distance to the far corner of the block.

## Comment

The type and shape can be swapped, but the position should go at the end of the first parameter. The gradient type and its size do not work with each other (logically, they conflict). Size wins.

## Example . The simplest option

Let's just set starting and ending colors:

`<div id="elem"></div>` `#elem { background: radial-gradient(red, blue); width: 200px; height: 200px; }`

:

## Example . Let's add a position

Let's set the center position: `30px` - left indent, `100px` - top indent:

`<div id="elem"></div>` `#elem { background: radial-gradient(at 30px 100px, red, blue); width: 200px; height: 200px; }`

:

## Example . Position in percentage

Let's set the center position as a percentage: `30%` - left indent, `50%` - top indent:

`<div id="elem"></div>` `#elem { background: radial-gradient(at 30% 50%, red, blue); width: 200px; height: 200px; }`

:

## Example . Position with keyword

You can use the `top`, `bottom`, `left`, `right`, `center` keywords in various combinations. Let's set, for example, a gradient to the right in the center:

`<div id="elem"></div>` `#elem { background: radial-gradient(at right center, red, blue); width: 200px; height: 200px; }`

:

## Example . Gradient length

In this case, the gradient will work like this: from `0px` to `20px` there will be a pure red color, from `20px` to `60px` - gradient from red to blue, after `60px` - pure blue:

`<div id="elem"></div>` `#elem { background: radial-gradient(red 20px, blue 60px); width: 200px; height: 200px; }`

:

## Example . Multiple colors in a row

In this case, the gradient will work like this: from `0px` to `20px` there will be a pure red color, from `20px` to `40px` there will be pure blue color, from `40px` to `60px` - gradient from blue to green, after `60px` - pure green:

`<div id="elem"></div>` `#elem { background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px); width: 200px; height: 200px; }`

:

## Example . Length + position

Let's simultaneously set the length for different colors and the position of the gradient center:

`<div id="elem"></div>` `#elem { background: radial-gradient(at 30px 60px, red 20px, blue 60px); width: 200px; height: 200px; }`

:

## Example . Gradient shape

The gradient shape is specified by the first parameter and can take `2` values: `circle` (circular gradient) or `ellipse` (elliptic gradient, default). Why haven’t we seen elliptical gradients before, even though it is set by default? Because before that the shape of the blocks was square. If we change the shape to rectangular, we will see an elliptical gradient:

`<div id="elem"></div>` `#elem { background: radial-gradient(red 20px, blue 60px); width: 300px; height: 200px; }`

:

## Example . Circular gradient

Let's make a circular gradient in a rectangular box. To do this, set the first parameter to the shape of the gradient using the `circle` keyword:

`<div id="elem"></div>` `#elem { background: radial-gradient(circle, red 20px, blue 60px); width: 300px; height: 200px; }`

:

## Example . Let's add a position

Let's add a position of the gradient to the previous code:

`<div id="elem"></div>` `#elem { background: radial-gradient(circle at 30px 60px, red 20px, blue 60px); width: 300px; height: 200px; }`

:

## Example . The farthest-corner + circle type

The gradient shape is calculated based on information about the distance to the far corner of the block:

`<div id="elem"></div>` `#elem { background: radial-gradient(circle farthest-corner at 60px 80px, red, blue); width: 300px; height: 200px; }`

:

## Example . The farthest-corner + ellipse type

The gradient shape is calculated based on information about the distance to the far corner of the block:

`<div id="elem"></div>` `#elem { background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue); width: 300px; height: 200px; }`

:

## Example . The farthest-side + circle type

The gradient extends to the far side of the block:

`<div id="elem"></div>` `#elem { background: radial-gradient(circle farthest-side at 60px 80px, red, blue); width: 300px; height: 200px; }`

:

## Example . The farthest-side + ellipse type

The gradient extends to the far side of the block:

`<div id="elem"></div>` `#elem { background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue); width: 300px; height: 200px; }`

:

## Example . The closest-corner + circle type

The gradient shape is calculated based on information about the distance to the nearest corner of the block:

`<div id="elem"></div>` `#elem { background: radial-gradient(circle closest-corner at 60px 80px, red, blue); width: 300px; height: 200px; }`

:

## Example . The closest-corner + ellipse type

The gradient shape is calculated based on information about the distance to the nearest corner of the block:

`<div id="elem"></div>` `#elem { background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue); width: 300px; height: 200px; }`

:

## Example . The closest-side + circle type

The shape of the gradient matches the side of the block closest to it:

`<div id="elem"></div>` `#elem { background: radial-gradient(circle closest-side at 60px 80px, red, blue); width: 300px; height: 200px; }`

:

## Example . The closest-side + ellipse type

The shape of the gradient matches the side of the block closest to it:

`<div id="elem"></div>` `#elem { background: radial-gradient(ellipse closest-side at 60px 80px, red, blue); width: 300px; height: 200px; }`

:

## See also

- the `linear-gradient` function
  that creates a linear gradient
- the `repeating-linear-gradient` function
  that creates a repeating linear gradient
- the `repeating-radial-gradient` function
  that creates a repeating radial gradient

← →
↑
en ru