The radial-gradient()
CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function's result is an object of the <gradient>
data type, which is a special kind of <image>
.
As with any gradient, a radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.
To create a radial gradient that repeats so as to fill its container, use the repeating-radial-gradient()
function instead.
Because <gradient>
s belong to the <image>
data type, they can only be used where <image>
s can be used. For this reason, radial-gradient()
won't work on background-color
and other properties that use the <color>
data type.
A radial gradient is defined by a center point, an ending shape, and two or more color-stop points.
To create a smooth gradient, the radial-gradient()
function draws a series of concentric shapes radiating out from the center to the ending shape (and potentially beyond). The ending shape may be either a circle or an ellipse.
Color-stop points are positioned on a virtual gradient ray that extends horizontally from the center towards the right. Percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents 100%
. Each shape is a single color determined by the color on the gradient ray it intersects.
/* A gradient at the center of its container, starting red, changing to blue, and finishing green */ radial-gradient(circle at center, red 0, blue, green 100%)
<position>
background-position
or transform-origin
. If unspecified, it defaults to center
.<shape>
circle
(meaning that the gradient's shape is a circle with constant radius) or ellipse
(meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to ellipse
.<extent-keyword>
Keyword | Description |
---|---|
closest-side | The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). |
closest-corner | The gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center. |
farthest-side | Similar to closest-side , except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides). |
farthest-corner | The gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center. |
Note: Early implementations of this function included other keywords (cover
and contain
) as synonyms of the standard farthest-corner
and closest-side
, respectively. Use the standard keywords only, as some implementations have already dropped those older variants.
<color-stop>
<color>
value, followed by an optional stop position (either a <percentage>
or a <length>
along the gradient's axis). A percentage of 0%
, or a length of 0
, represents the center of the gradient; the value 100%
represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray.radial-gradient( [ [ circle || <length> ] [ at <position> ]? , | [ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , | [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , | at <position> , ]? <color-stop> [ , <color-stop> ]+ ) where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop> = <color> [ <percentage> | <length> ]?
.radial-gradient { background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); }
.radial-gradient { background-image: radial-gradient(farthest-corner at 40px 40px, #f35 0%, #43e 100%); }
Note: Please see Using CSS gradients for more examples.
Specification | Status | Comment |
---|---|---|
CSS Images Module Level 3 The definition of 'radial-gradients()' in that specification. | Candidate Recommendation | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 26
|
12 | 16
|
10
|
12.1
|
6.1
|
at syntax |
26 | 12 | 16
|
10 | 15
|
No |
Interpolation Hints / Gradient Midpoints | 40 | No | 36 | No | 27 | 6.1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes
|
26
|
Yes | 16
|
12.1
|
Yes | Yes |
at syntax |
Yes | Yes | Yes | 16
|
No | No | Yes |
Interpolation Hints / Gradient Midpoints | 40 | 40 | No | 36 | Yes | Yes | Yes |
Gecko used to have a long-standing bug whereby radial gradients like radial-gradient(circle gold,red)
would work, even though they shouldn't because of the missing comma between circle
and gold
. Also, calc()
expressions were rejected — causing the value to be invalid — when used as the radius component of a radial-gradient()
function (bug 1376019). Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, released in Firefox 57) fixed these bugs.
repeating-radial-gradient()
, linear-gradient()
, repeating-linear-gradient()
<image>
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient