--- title: "How to: Paint an Area with a Linear Gradient" ms.date: "03/30/2017" helpviewer_keywords: - "linear gradients [WPF], painting with" - "brushes [WPF], painting with linear gradients" - "painting [WPF], with linear gradients" ms.assetid: 00e0cd04-48c0-4ec5-850e-d321beb37a34 --- # How to: Paint an Area with a Linear Gradient This example shows how to use the class to paint an area with a linear gradient. In the following example, the of a is painted with a diagonal linear gradient that transitions from yellow to red to blue to lime green. ## Example [!code-xaml[GradientBrushExamples_snip#DiagonalGradient1XAML](~/samples/snippets/xaml/VS_Snippets_Wpf/GradientBrushExamples_snip/XAML/LinearGradientBrushExample.xaml#diagonalgradient1xaml)] [!code-csharp[GradientBrushExamples_snip#DiagonalGradient1CSharp](~/samples/snippets/csharp/VS_Snippets_Wpf/GradientBrushExamples_snip/CSharp/LinearGradientBrushExample.cs#diagonalgradient1csharp)] The following illustration shows the gradient created by the previous example. ![Diagonal linear gradient](./media/graphicsmm-diagonallgb.jpg "graphicsmm_DiagonalLGB") To create a horizontal linear gradient, change the and of the to (0,0.5) and (1,0.5). In the following example, a is painted with a horizontal linear gradient. [!code-xaml[GradientBrushExamples_snip#HorizontalGradient1XAML](~/samples/snippets/xaml/VS_Snippets_Wpf/GradientBrushExamples_snip/XAML/LinearGradientBrushExample.xaml#horizontalgradient1xaml)] [!code-csharp[GradientBrushExamples_snip#HorizontalGradient1CSharp](~/samples/snippets/csharp/VS_Snippets_Wpf/GradientBrushExamples_snip/CSharp/LinearGradientBrushExample.cs#horizontalgradient1csharp)] The following illustration shows the gradient created by the previous example. ![A horizontal linear gradient](./media/graphicsmm-horizontallgb.jpg "graphicsmm_HorizontalLGB") To create a vertical linear gradient, change the and of the to (0.5,0) and (0.5,1). In the following example, a is painted with a vertical linear gradient. [!code-xaml[GradientBrushExamples_snip#VerticalGradient1XAML](~/samples/snippets/xaml/VS_Snippets_Wpf/GradientBrushExamples_snip/XAML/LinearGradientBrushExample.xaml#verticalgradient1xaml)] [!code-csharp[GradientBrushExamples_snip#VerticalGradient1CSharp](~/samples/snippets/csharp/VS_Snippets_Wpf/GradientBrushExamples_snip/CSharp/LinearGradientBrushExample.cs#verticalgradient1csharp)] The following illustration shows the gradient created by the previous example. ![Vertical linear gradient](./media/graphicsmm-verticallgb.jpg "graphicsmm_VerticalLGB") > [!NOTE] > The examples in this topic use the default coordinate system for setting start points and end points. The default coordinate system is relative to a bounding box: 0 indicates 0 percent of the bounding box, and 1 indicates 100 percent of the bounding box. You can change this coordinate system by setting the property to the value . An absolute coordinate system is not relative to a bounding box. Values are interpreted directly in local space. For additional examples, see [Brushes Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/Brushes). For more information about gradients and other types of brushes, see [Painting with Solid Colors and Gradients Overview](painting-with-solid-colors-and-gradients-overview.md).