docs-desktop/dotnet-desktop-guide/framework/winforms/advanced/how-to-create-a-linear-gradient.md

title, ms.date, dev_langs, helpviewer_keywords, ms.assetid

title	ms.date	dev_langs	helpviewer_keywords	ms.assetid
How to: Create a Linear Gradient	03/30/2017	csharp vb	linear gradients [Windows Forms], creating gradients [Windows Forms], creating linear colors [Windows Forms], creating linear gradients gradients	6c88e1cc-1217-4399-ac12-cb37592b9f01

How to: Create a Linear Gradient

GDI+ provides horizontal, vertical, and diagonal linear gradients. By default, the color in a linear gradient changes uniformly. However, you can customize a linear gradient so that the color changes in a non-uniform fashion.

Note

The examples in this article are methods that are called from a control's xref:System.Windows.Forms.Control.Paint event handler.

The following example fills a line, an ellipse, and a rectangle with a horizontal linear gradient brush.

The xref:System.Drawing.Drawing2D.LinearGradientBrush.%23ctor%2A constructor receives four arguments: two points and two colors. The first point (0, 10) is associated with the first color (red), and the second point (200, 10) is associated with the second color (blue). As you would expect, the line drawn from (0, 10) to (200, 10) changes gradually from red to blue.

The 10s in the points (0, 10) and (200, 10) are not important. What is important is that the two points have the same second coordinate — the line connecting them is horizontal. The ellipse and the rectangle also change gradually from red to blue as the horizontal coordinate goes from 0 to 200.

The following illustration shows the line, the ellipse, and the rectangle. Note that the color gradient repeats itself as the horizontal coordinate increases beyond 200.

To use horizontal linear gradients

• Pass in the opaque red and opaque blue as the third and fourth argument, respectively.

  [!code-csharpSystem.Drawing.UsingaGradientBrush#21] [!code-vbSystem.Drawing.UsingaGradientBrush#21]

In the preceding example, the color components change linearly as you move from a horizontal coordinate of 0 to a horizontal coordinate of 200. For example, a point whose first coordinate is halfway between 0 and 200 will have a blue component that is halfway between 0 and 255.

GDI+ allows you to adjust the way a color varies from one edge of a gradient to the other. Suppose you want to create a gradient brush that changes from black to red according to the following table.

Horizontal coordinate	RGB components
0	(0, 0, 0)
40	(128, 0, 0)
200	(255, 0, 0)

Note that the red component is at half intensity when the horizontal coordinate is only 20 percent of the way from 0 to 200.

The following example sets the xref:System.Drawing.Drawing2D.LinearGradientBrush.Blend%2A?displayProperty=nameWithType property to associate three relative intensities with three relative positions. As in the preceding table, a relative intensity of 0.5 is associated with a relative position of 0.2. The code fills an ellipse and a rectangle with the gradient brush.

The following illustration shows the resulting ellipse and rectangle.

To customize linear gradients

• Pass in the opaque black and opaque red as the third and fourth argument, respectively.

  [!code-csharpSystem.Drawing.UsingaGradientBrush#22] [!code-vbSystem.Drawing.UsingaGradientBrush#22]

The gradients in the preceding examples have been horizontal; that is, the color changes gradually as you move along any horizontal line. You can also define vertical gradients and diagonal gradients.

The following example passes the points (0, 0) and (200, 100) to a xref:System.Drawing.Drawing2D.LinearGradientBrush.%23ctor%2A constructor. The color blue is associated with (0, 0), and the color green is associated with (200, 100). A line (with pen width 10) and an ellipse are filled with the linear gradient brush.

The following illustration shows the line and the ellipse. Note that the color in the ellipse changes gradually as you move along any line that is parallel to the line passing through (0, 0) and (200, 100).

To create diagonal linear gradients

• Pass in the opaque blue and opaque green as the third and fourth argument, respectively.

  [!code-csharpSystem.Drawing.UsingaGradientBrush#23] [!code-vbSystem.Drawing.UsingaGradientBrush#23]

See also

• Using a Gradient Brush to Fill Shapes
• Graphics and Drawing in Windows Forms