-ms-radial-gradient
Property of css/propertiescss/properties
Syntax
var result = element.-ms-radial-gradient; element.-ms-radial-gradient = value;
Examples
The following radial gradient (used as the argument for the background-image property) has the same three color stops as the linear gradient example . This circular gradient’s line begins in the lower-left corner of the box that contains it and ends at the side of the box that is farthest from its center.
background-image: -ms-radial-gradient(left bottom, circle farthest-side, #F7FF08 0%, #21AD11 50%, #00A3EF 80%);
background-image: -ms-radial-gradient(left bottom, ellipse farthest-side, #F7FF08 0%, #21AD11 50%, #00A3EF 80%);
[Simply changing the shape in the previous declaration from circle to ellipse makes the gradient appear as follows: View live example]
Notes
Remarks
Important The -ms-radial-gradient() function has been superseded by the radial-gradient function, which does not require the "-ms-" prefix and has a different syntax. Though the -ms-radial-gradient() function is still recognized by Internet Explorer 10, Microsoft encourages you to use the radial-gradient function, as it is compliant with the latest version of the CSS Image Values and Replaced Content Module Level 3 specification.
Syntax
-ms-radial-gradient
(
<starting-point>
,
<shape>
<size>
,
<stop-color>
<stop-offset>
,
<stop-color>
<stop-offset>
, ...)
Parameters
- starting-point
- Optional value that specifies a starting point for the gradient. This value can be one or two of the following keywords.
Value Meaning <a id="left"/><a id="LEFT"/> - left
First value only. Indicates gradient starts from left. <a id="center"/><a id="CENTER"/> - center
First value only. Indicates gradient starts from center. <a id="right"/><a id="RIGHT"/> - right
First value only. Indicates gradient starts from right. <a id="top"/><a id="TOP"/> - top
Default. Second value only. Indicates gradient starts from top. <a id="middle"/><a id="MIDDLE"/> - middle
Second value only. Indicates gradient starts from middle <a id="bottom"/><a id="BOTTOM"/> - bottom
Second value only. Indicates gradient starts from bottom. - shape
- Optional value that specifies the shape of the gradient.
Value Meaning <a id="ellipse"/><a id="ELLIPSE"/> - ellipse
Indicates gradient is in the shape of an ellipse. <a id="circle"/><a id="CIRCLE"/> - circle
Indicates gradient is in the shape of an circle. - size
- Optional value that specifies the size relative to the box closest to its center. Its possible values are either two space-delimited length values (or percentages) or one of the following keywords.
Value Meaning <a id="lengths"/><a id="LENGTHS"/> - lengths
Two space-delimited length values or percentages. <a id="closest-side"/><a id="CLOSEST-SIDE"/> - closest-side
For circular gradients, this value indicates that the ending-shape is circle sized so that it exactly meets the side of the box closest to its center. For elliptical gradients, the gradient-shape is an ellipse size so that it exactly meets the vertical and horizontal sides of the box closest to its center. <a id="closest-corner"/><a id="CLOSEST-CORNER"/> - closest-corner
Sizes the gradient-shape so that it exactly meets the closest corner of the box from its center. For elliptical gradients, the gradient-shape has the same ratio of width to height that it would if closest-side were specified. <a id="farthest-side"/><a id="FARTHEST-SIDE"/> - farthest-side
Similar to closest-side, except the gradient-shape is sized to meet the side of the box that is farthest from its center (for circular gradients) or the farthest vertical and horizontal sides (for elliptical gradients). <a id="farthest-corner"/><a id="FARTHEST-CORNER"/> - farthest-corner
Sizes the gradient-shape so that it exactly meets the farthest corner of the box from its center. For elliptical gradients, the gradient-shape has the same ratio of width to height that it would if farthest-side were specified. <a id="contain"/><a id="CONTAIN"/> - contain
Same as closest-side. <a id="cover"/><a id="COVER"/> - cover
Default. Same as farthest-corner. - stop-color
- Required. 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, as described in CSS Values and Units.
- stop-offset
- Optional percentage or decimal value that indicates where along the gradient line (from the center outward) to place the color stop. For instance, a value of 20% or 0.2 indicates the color stop should be placed at a point 20% of the length of the gradient line, starting from the beginning of the line.
See also
Related articles
Deprecated
- -ms-radial-gradient
Gradients
- -ms-radial-gradient
Attributions
Microsoft Developer Network: [Windows Internet Explorer API reference Article]