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

<GradientStop   .../>

Managed Equivalent



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.