radial-gradient() function
Specifies a radial gradient, in which colors transition smoothly from a single point, and then spread outward in a circle or ellipse. A radial gradient is specified by first defining a center point, then the size and shape (if an ellipse) of the final—or 100%—circle or ellipse, and then the color stops in between, separated by commas.
 |
Syntax
radial-gradient
([ [
<shape>
||
<size>
] [ at
<position>
] ? , | at
<position>
, ] ?
<color-stop>
[ ,
<color-stop>
] +)
Parameters
- position
-
Optional value that specifies the center of the gradient. This value can take the same values as the background-position property. If this value is omitted, it defaults to center.
- shape
-
Optional value that specifies the ending shape of the gradient. If this value is omitted, the ending shape is a circle if the size parameter is a single length value, and an ellipse otherwise.
Value Meaning - ellipse
Indicates gradient is in the shape of an ellipse.
- circle
Indicates gradient is in the shape of an circle.
- size
-
Optional value that specifies the size of the gradient's ending shape. If this value is omitted, it defaults to farthest-corner.
- color-stop
-
At least two color stops are required. Each color stop has one or two components—a color component and an optional position component.
The first component defines the color component of a stop point for the gradient. Each stop point has its own designated color, and the area between each point is filled with a continuous color transition from one to the other. This value can be any supported color value.
The second component is an optional percentage or decimal value that indicates where along the gradient ray (similar to a gradient line in a linear-gradient, but from the center outward) to place the color stop. "0%" indicates the start of the gradient ray, and "100%" indicates the point where the gradient ray intersects the ending shape. For instance, a value of "20%" indicates the color stop should be placed at a point 20% of the length of the gradient ray, starting from the beginning of the line. Values can be negative, which indicates that the specified color for that value is at mid-transition to the next color at the center of the gradient, so the visible color at the center will be somewhere between the specified color and the next color. Values can be greater than 100%, which specifies a location a correspondingly greater distance from the center of the gradient.
Remarks
As of Microsoft Edge CSS Gradient Midpoints, or color hints, are supported. With CSS Gradient Midpoints, you can specify an optional location between the color stops of a CSS gradient. The color will always be exactly between the colors of the two stops at that point. Other colors along the gradient line are calculated using an exponential interpolation function. Check out the CSS Gradient Midpoints demo.
Do not use the Microsoft vendor prefix ("-ms-") before the Cascading Style Sheets (CSS) gradients functions. They are supported unprefixed in Internet Explorer 10 and later.
As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-radial-gradient" as an alias for this property. However when using the "-webkit-" prefixed property, the syntax is slightly different. Please refer to Safari Developer Library documentation: Using Gradients for the correct syntax.
Examples
Often different radial gradient syntax can be used to produce the same results. For instance, all three of the following examples, when applied to a 250×150-pixel div element, produce the image shown here.
background-image: radial-gradient(yellow, blue); background-image: radial-gradient(ellipse at center, yellow 0%, blue 100%); background-image: radial-gradient(farthest-corner at 50% 50%, yellow, blue);
The following example is similar to the previous example, but a circular gradient has been specified.
background-image: radial-gradient(circle, yellow, blue);
The following example has three colors specified. Either of the declarations produces the image here.
background-image: radial-gradient(#FFF133, #16D611, #00A3EF); background-image: radial-gradient(ellipse at center, #FFF133 0%, #16D611 50%, #00A3EF 100%);
Of course, you can also originate the radial gradient in locations other than the center of the gradient box. Use the closest-side or farthest-side keywords to size the gradient so that the ending shape meets either the closest or farthest side, respectively, of the gradient box.
background-image: radial-gradient(farthest-side at left bottom, #FFF133, #16D611 100px, #00A3EF);
The following examples set the center of the gradient at 40px from the left side of the gradient box and 50px from the top side of the gradient box. The first example uses closest-side, so the ending shape of the gradient is defined by the closest sides of the gradient box—namely, the top and left sides.
'
background-image: radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF);
The second example uses farthest-side, so the ending shape of the gradient is defined the farthest sides of the gradient box—namely, the right and bottom sides.
background-image: radial-gradient(farthest-side at 40px 50px, #FFF133, #16D611, #00A3EF);
If you use closest-side or farthest-side with circular gradients, the size is determined by the closest side of the gradient box. For the following closest-side example, that side is the left side.
background-image: radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);
For the following farthest-side example, the size of the circle gradient is determined by the right side of the gradient box.
background-image: radial-gradient(farthest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);
See also