• Article

GradientStop

Microsoft Silverlight will reach end of support after October 2021. Learn more.

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

<GradientStop   .../>

Managed Equivalent

GradientStop

Remarks

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.

Example

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

<Canvas
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

  <!-- This rectangle is painted with a diagonal linear gradient. -->
  <Rectangle Width="200" Height="100">
    <Rectangle.Fill>
      <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" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
</Canvas>

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.