Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Collapse the table of content
Expand the table of content



Describes the location and color of a transition point in a gradient.

<GradientStop   .../>

Use this object to describe the colors in a LinearGradientBrush or RadialGradientBrush object.

GradientStop does not provide an opacity property; to make a GradientStop semitransparent, set its Color property with a transparent Color.

For more information on basic concepts, see Brushes. Note that the Brushes topic is written primarily for users of the managed API, and may not have code examples or specific information that address the JavaScript API scenarios.

The following example creates a linear gradient with four colors and uses it to paint a Rectangle.


  <!-- This rectangle is painted with a diagonal linear gradient. -->
  <Rectangle Width="200" Height="100">
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />

The following illustration shows the results of the preceding code, with the highlighted gradient stops.

Gradient stops in a linear gradient

Gradient with gradient stops.

Community Additions

© 2015 Microsoft