CSS Almanac → Functions → R → radial-gradient()

radial-gradient()

Juan Diego Rodríguez on Jul 31, 2025

The radial-gradient() function creates a circular or elliptical color gradient starting from a center point and spreading outward. It’s mainly used along with the background-image property to set the backdrop of an element.

body {
  background: radial-gradient(circle, lch(79 33 356) 20%, lch(82 28 253) 100%);
}

The radial-gradient() function is defined in the CSS Images Module Level 3 and Level 4 specifications.

Check out the CSS Gradients Guide to learn about more about gradient features.

Syntax

radial-gradient(<radial-shape> <rg-size> at <position> <color-interpolation-method>, <color-stop-list>)

Arguments

/* Default */
radial-gradient(red, orange);
radial-gradient(oklch(0.87 0.14 99), oklch(0.75 0.18 328));

/* Defined stops */
radial-gradient(blue 30%, purple 80%);
radial-gradient(green 30% 80%, blue 80% 100%);

/* Radial Shapes */
radial-gradient(circle, orange, yellow);
radial-gradient(ellipse, purple, white);

/* Radial sizes */
radial-gradient(100px, black, white);
radial-gradient(100px 200px, green, yellow);
radial-gradient(closest-side, green, yellow);

/* Gradient positions */
radial-gradient(at right bottom, green, yellow);
radial-gradient(at 20% 40px, green, olive);

/* Interpolation methods */
radial-gradient(in oklab, hsl(120 100 50), yellow);
radial-gradient(in lch longer hue, blue, yellow);

/* All together */
radial-gradient(circle farthest-side at left top in lch longer hue, oklch(0.87 0.14 99) 30%, yellow 100%);

`<color-interpolation-method>`

This argument defines the color space used and the path taken between one color to another. To use it, we start with the in keyword followed by one of the many color spaces defined in CSS:

<color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

<rectangular-color-space> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65
<polar-color-space> = hsl | hwb | lch | oklch

Note: It can be either written at the beginning of radial-gradient() or just before defining the <color-stop-list>.

If the color space uses polar coordinates (hsl, hwb, lch and oklch), then we can also define the path taken by the gradient using the <hue-interpolation-method> syntax.

<hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue

`<radial-shape>`

This argument defines the gradient’s ending shape and can either be circle or ellipse.

<radial-shape> = circle | ellipse

If we don’t define it, then the ending shape will be an ellipse. Unless we provide a single <length> value for <radial-size>, then it will be a circle.

`<radial-size>`

This argument defines the size of the gradient’s ending shape. It can be defined either explicitly through lengths or through a <radial-extent> keyword.

<radial-size> = <radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}

The explicit size depends on whether the ending shape is a circle or an ellipse.

For circles, we can give it a single positive <length> to define its radius.
For ellipses, we can give it a positive <length> to define its horizontal radius and a positive <length-percentage> to define its vertical radius.

Both circular and elliptical gradient sizes can be defined through a <radial-extent> keyword, which lets CSS extend the gradient up until a defined point.

<radial-extent> = closest-side | closest-corner | farthest-side | farthest-corner

closest-side: The ending shape extends until the gradient box’s closest side to the gradient’s center.
closest-corner: The ending shape extends until the gradient box’s closest corner to the gradient’s center.
farthest-side: The ending shape extends until the gradient box’s farthest side to the gradient’s center.
farthest-corner (default): The ending shape extends until the gradient box’s farthest corner to the gradient’s center.

Note: The gradient box refers to the area where the gradient is displayed. It’s usually the element’s border box, but it can be modified through the background-size property.

`<position>`

This argument defines the center of the gradient using the <position> syntax for each axis. This includes explicit values, like 40% 20% and 30px 100px, and physical values, like left top, center, right bottom, etc. If omitted, it defaults to center. I’ve tried using logical property values, like inline-start and block-end, but they do not seem to be supported, at least at the time of writing.

`<color-stop-list>`

This argument defines the colors used and their position on the gradient in a comma-separated list. Each color stop has a given <color> followed by optional <length-percentage> values:

A single <color> value lets CSS decide where to place the color.
A <color> <length-percentage> value defines where the given color should be found.
Lastly, <color> <length-percentage> <length-percentage> defines a starting and ending point for the color to appear.

Basic usage

The prior syntax can be a little hard to understand at first glance, but that’s because radial gradients can be as complicated as we want them to be. Luckily, this also means gradients can be simple and defined with less complexity. For instance, the next gradient only takes two colors:

.element {
  background: radial-gradient(red, orange);
}

Tip: Remember that radial-gradient() returns an <image> type, meaning it’s used within the background-image (or background) property, and not inside background-color.

When we define a radial gradient like this, colors are placed from the center of the gradient outwards following their written order. What’s best, we can use as many colors as we want:

.element {
  background: radial-gradient(red, orange, yellow, green, blue, purple);
}

When we simply write colors, CSS evenly places each one along the gradient’s extension. However, we can define where each should be found by assigning either a <length> or <percentage> after the color. For example, the next gradient example places blue 200px away from the gradient’s center and purple at 60%, then makes the gradient in between:

.element {
  background: radial-gradient(blue 200px, purple 60%);
}

Note: Percentage values (like 60%) are relative to the gradient’s radius, while lengths (like 200px) refer to the distance going right from the gradient’s center.

Circles and ellipses

Radial gradients can be thought of as concentric rings going from the gradient’s center outward, and they can be either circles or ellipses. By default, radial gradients are ellipses, but on a surface level, their only difference is that circles have a consistent radius while ellipses have vertical and horizontal radii that stretch things out.

.ellipse {
  background: radial-gradient(closest-side, red, blue);
  /* same as */
  background: radial-gradient(ellipse closest-side, red, blue);
}

.circle {
  background: radial-gradient(circle closest-side, red, blue);
}

Here, I am adding the closest-side (more on that in a moment) argument so we can better see each shape:

Sizing gradients

Not only can we choose a gradient’s shape, we can also pick its size, and while it may seem odd, we first need to define what exactly the “size of a gradient” means. Since radial gradients have several concentric rings, the size of the gradient refers to the radius/radii of the outer ring that contains all of the gradient’s colors. After that, the rest of the background is a solid color.

For example, the following circular gradient goes from red to pink over a short span, and after that, it’s just solid pink. In this case, the radius of the circle is the size of the gradient:

We can pick a gradient’s size through explicit or keyword values. When we explicitly define the gradient’s size, we will be writing the radius/radii in two ways depending on the gradient’s shape:

As a <length> for circular gradient’s radius.
As a <length> <length-percentage> for elliptical gradient’s horizontal and vertical radii, respectively.

.circle {
  background: radial-gradient(circle 100px, crimsom, darkred);
}

.ellipse {
  background: radial-gradient(ellipse 100px 200px, crimsom, darkred);
}

Here, we specified whether the gradient’s was a circle or ellipse, but CSS is smart enough to infer the gradient’s shape from the number of values: one for circle and two for ellipse, so it’s the same as writing:

.circle {
  background: radial-gradient(100px, crimsom, darkred);
}

.ellipse {
  background: radial-gradient(100px 200px, crimsom, darkred);
}

We can also let CSS handle the gradient’s size using one of four extent values, each specifying a specific point where the gradient’s radius stops. These can be:

`closest-side`

This means that the gradient extends until it reaches the side of the gradient box closest to its center. The final size depends on the gradient’s shapes:

For circular gradients, it extends until its radius reaches the closest side.
Since ellipses have horizontal and vertical radii, both radii extend until they reach their closest side on their respective axis.

`closest-corner`

This time, the gradient extends until it passes over the corner of the gradient box closest to its center. In this case, elliptical gradients have the same aspect ratio they would have if closest-side was used:

`farthest-side`

This value acts the same as closest-side, but this time the gradient extends until it reaches the farthest side. For elliptical gradients, both sides extend too until they reach their farthest side on their respective axis:

`farthest-corner`

This is the default value if we don’t specify any other value. The gradient extends until it passes over the farthest corner. For elliptical gradients, it also takes the aspect ratio it would have if farthest-side was used:

Here, I moved the gradients (something we’ll learn to do in a bit) away from the center, so we can see the difference between each value.

Moving gradients around

By default, the center of a gradient is placed in the middle of the gradient box. However, we can move it around by defining its horizontal and vertical position after the at keyword. The available options are:

Two physical values, like left top, center right or bottom.

.element {
  background: radial-gradient(circle 150px at top right, black, white);
}

Lengths, like 100px 20px, or 20vw. These are placed away from the gradient’s box top-left corner.

.element {
  background: radial-gradient(circle 150px at 20px 60px, black, white);
}

Percentages, like 40% 20% or 25%. They are relative to the gradient’s box size and also placed from its top-left corner.

.element {
  background: radial-gradient(circle 150px at 40% 20%, black, white);
}

It’s also worth noting both lengths and percentages can be lower than zero or bigger than the gradient’s box, placing the gradient’s center outside its box.

.element {
  background: radial-gradient(circle 150px at -20px 110%, black, white);
}

Note: Logical position values like start or block-end don’t seem to work inside radial-gradient().

Full color stops

You would imagine that the radial-gradient() function is used for… well, gradients. However, we can take advantage of the color stop syntax to define solid “gradients”, like this one:

.element {
  background: radial-gradient(circle, yellow 0% 50%, blue 50% 75%, red 75% 100%);
}

The last radial-gradient() says “I want yellow from the start to 50%, right after, blue from 50% to 75% and lastly, red from 75% until the end”. The trick here is to specify each color right next to the other, with no spaces in between for the gradient to exist. The beginning 0% and ending 100% aren’t necessary, so we might as well write it like this:

.element {
  background: radial-gradient(circle, yellow 50%, blue 50% 75%, red 75%);
}

What’s cooler is that we can create circles and ellipses using this technique. All we do is define a beginning color that full stops into transparent, giving the illusion of a solid circle:

.element {
  background: radial-gradient(circle 200px, yellow 100%, transparent 100%);
  /* same as */
  background: radial-gradient(circle 200px, yellow 100%, transparent);
}

And remember, this is a background, so no need for extra elements! And since the background can take a list of multiple backgrounds, we can stack as many radial-gradient() functions as we want. For example, the following demo only uses the body, has one background property and several radial-gradient() functions:

Specification

The radial-gradient() function is defined in the CSS Images Module Level 3 and Level 4 specifications which are currently in Editor’s Draft. Lastly, the color interpolation methods are defined in the CSS Color Module Level 4.