-ms-radial-gradient() function

Deprecated. (See Remarks.) 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

-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.

ValueMeaning
left

First value only. Indicates gradient starts from left.

center

First value only. Indicates gradient starts from center.

right

First value only. Indicates gradient starts from right.

top

Default. Second value only. Indicates gradient starts from top.

middle

Second value only. Indicates gradient starts from middle

bottom

Second value only. Indicates gradient starts from bottom.

 

shape

Optional value that specifies the shape of the gradient.

ValueMeaning
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 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.

ValueMeaning
lengths

Two space-delimited length values or percentages.

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.

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.

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).

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.

contain

Same as closest-side.

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.

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.

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%);

Image of a radial, circular gradient.

Simply changing the shape in the previous declaration from circle to ellipse makes the gradient appear as follows:


background-image: -ms-radial-gradient(left bottom, ellipse farthest-side, #F7FF08 0%, #21AD11 50%, #00A3EF 80%);

Image of a radial, elliptical gradient.

 

 

Send comments about this topic to Microsoft

Build date: 9/6/2012

Community Additions

Show:
© 2014 Microsoft