The 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-gradientfunction
that creates a linear gradient -
the
repeating-linear-gradientfunction
that creates a repeating linear gradient -
the
repeating-radial-gradientfunction
that creates a repeating radial gradient
