-ms-linear-gradient() function

Deprecated. (See Remarks.) Specifies a linear gradient, in which colors transition smoothly from one side of an object to the other, by identifying a starting point and two or more stop colors and offsets.



( <angle> <starting-point> , <stop-color> <stop-offset> , <stop-color> <stop-offset> , ...)



Optional. The angle the gradient-line should assume, expressed as a number followed by an angle units designator (deg, grad, rad, or turn). For more information about supported angle units, see CSS Values and Units. For instance, 0deg points upwards, 90deg points toward the right, and positive angles go clockwise.

If no angle is provided, the gradient line starts in the corner or side specified by <starting-point> and ends in the opposite corner or side.


Optional value that specifies a starting point for the gradient. This value can be one or two of the following keywords.


First value only. Indicates gradient starts from left.


First value only. Indicates gradient starts from right.


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


Second value only. Indicates gradient starts from bottom.



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.


Optional percentage or decimal value that indicates where along the gradient line to place the color stop.


Important  The -ms-linear-gradient() function has been superseded by the linear-gradient function, which does not require the "-ms-" prefix and has a different syntax. Though the -ms-linear-gradient() function is still recognized by Internet Explorer 10, Microsoft encourages you to use the linear-gradient function, as it is compliant with the latest version of the CSS Image Values and Replaced Content Module Level 3 specification.

The -ms-linear-gradient() function requires at least two stop points.


The following linear gradient (used as the argument for the background-image property) has three color stops:

  • The first color stop is in the top-right corner and defines a gradient line that extends to the bottom-left corner. The first stop is a shade of yellow.
  • The second color stop is halfway along the gradient line and is a shade of green.
  • The final color stop is 80% of the way along the gradient line and is a shade of blue. From this stop to the end of the gradient line (between 80% and 100%), the color remains this shade of blue.

background-image: -ms-linear-gradient(top right, #FFF133 0%, #16D611 50%, #00A3EF 80%);

Image of a linear gradient in a rectangle.

Because no angle is specified, the gradient line starts in the top-right corner of the rectangle and ends in the bottom-left corner.



Send comments about this topic to Microsoft

Build date: 9/28/2012

Community Additions