Gradients are a good way to make your application more visually interesting. They turn a flat solid color into something more natural and appealing to the eye by creating an illusion of light and shadow.
For example, compare this image which uses flat colors:
to this image that uses gradient colors:
For some great uses of gradient effects in user interface designs, see this link.
If you are not familiar with the terminology, a gradient is basically a blending of colors with an even graduation from one set of color values to another set of color values. Notice in the second image above, the white gradually blends into blue from the upper left corner to the lower right corner.
In Silverlight and WPF, you can set colors for just about anything, and wherever you can set a color you can often set a gradient. These examples color the background of the Canvas, but you could also paint Buttons or Rectangles or whatever.
In XAML, there are two primary types of gradients: Linear and Radial.
Linear Gradient
A linear gradient defines the graduation of colors along a line. The example below shows a linear gradient following a line from white at the top to blue at the bottom:

The XAML code required to set the linear gradient shown above is as follows:
<Canvas>
<Canvas.Background>
<LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="LightSteelBlue" Offset="1"/>
</LinearGradientBrush>
</Canvas.Background>
</Canvas>
This specific code sets the gradient for a Canvas background, but you could use it anywhere a gradient is allowed.
The first properties you need to consider when defining your gradient are the StartPoint and EndPoint properties. These properties define where the gradient line begins and where it ends.
Think of the canvas as a rectangle with the (0,0) point in the upper left corner and the (1,1) point in the lower right corner as shown below:
If you set the StartPoint to 0,0 and the EndPoint to 1,1, the gradient will start in the upper left and end in the lower right as shown in the Address dialog example shown at the top of this post. (This is the default value, so if you don’t set the StartPoint and EndPoint properties, this is the gradient you will get.)
By setting the StartPoint to .5,0 and EndPoint to .5,1, the gradient line begins in the middle top of the rectangle and ends in the middle bottom, creating the affect shown above.
If you want the gradient to appear from left to right, set the StartPoint to 0,.5 and the EndPoint to 1,.5. For right to left, set the StartPoint to 1,.5 and the EndPoint to 0,.5.
You can use any point in the rectangle as the StartPoint and EndPoint to create different effects. For example, you could set the StartPoint to .2,.2 and the EndPoint to .8,.8 to create this effect:
Notice the upper left corner is completely white and the lower right corner is completely blue. The gradient does not begin until .2,.2 and then ends at .8,.8.
The other important property to use when working with a linear gradient is the GradientStop. It defines the colors and where they start. The first GradientStop in this example is set to white and starts at an Offset of 0. The second GradientStop is set to LightSteelBlue at an Offset of 1.
Think of the Offset as the point on the gradient line where 0 is the origin of the line and 1 is the termination of the line. Note that if your StartPoint and EndPoint properties are not at a point of origin (such as .2,.2 and .8,.8), the Offset will still begin at the origin and end at the termination of the gradient line.
You can use any number of GradientStops (with a minimum of two) to include multiple colors in your gradient. For example, this gradient changes from White, to LightSteelBlue, to SteelBlue, back to LightSteelBlue and then White:
<Canvas>
<Canvas.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="LightSteelBlue" Offset=".2"/>
<GradientStop Color="SteelBlue" Offset=".4"/>
<GradientStop Color="LightSteelBlue" Offset=".8"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Canvas.Background>
</Canvas>
And the effect is as follows:
Radial Gradient
A radial gradient defines the graduation of colors that radiate outward from an origin. The example below shows a radial gradient radiating out from the center:
The XAML code required to set a radial gradient is as follows:
<Canvas>
<Canvas.Background>
<RadialGradientBrush GradientOrigin=".5,.5">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="LightSteelBlue" Offset="1"/>
</RadialGradientBrush>
</Canvas.Background>
This specific code sets the gradient for a Canvas background, but you could use it anywhere a gradient is allowed.
The first property you need to consider when defining your radial gradient is the GradientOrigin. It defines where the gradient begins.
Think of the canvas as a rectangle with the (0,0) point in the upper left corner and the (1,1) point in the lower right corner as shown below:
In this example, the gradient radiates out from the center point, which is .5,.5. (This is the default value, so if you don’t set the GradientOrigin property, this is the gradient origin you will get.)
The other important property to use when working with a radial gradient is the GradientStop. It defines the colors and where they start. The first GradientStop in this example is set to white and starts at an Offset of 0. The second GradientStop is set to LightSteelBlue at an Offset of 1.
This GradientStop property in the radial gradient is similar to the linear gradient. The primary difference is that the gradient line begins at the GradientOrigin and radiates outward.
You can use any number of GradientStops (with a minimum of two) to include multiple colors in your gradient. For example, this gradient has an origin of .2,.2. It then changes from White, to LightSteelBlue, to SteelBlue, back to LightSteelBlue and then White:
<Canvas>
<Canvas.Background>
<RadialGradientBrush GradientOrigin=".2,.2">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="LightSteelBlue" Offset=".2"/>
<GradientStop Color="SteelBlue" Offset=".4"/>
<GradientStop Color="LightSteelBlue" Offset=".8"/>
<GradientStop Color="White" Offset="1"/>
</RadialGradientBrush>
</Canvas.Background>
</Canvas>
And the effect is as follows:
Feel free to experiment with both types of gradients to produce interesting visual effects.
Enjoy!