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.

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

The LinearGradientBrush 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 (50, 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.

  Dim linGrBrush As New LinearGradientBrush( _
     New Point(0, 10), _
     New Point(200, 10), _
     Color.FromArgb(255, 255, 0, 0), _
     Color.FromArgb(255, 0, 0, 255))
  Dim pen As New Pen(linGrBrush)
  
  e.Graphics.DrawLine(pen, 0, 10, 200, 10)
  e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100)
  e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30)
  

  LinearGradientBrush linGrBrush = new LinearGradientBrush(
     new Point(0, 10),
     new Point(200, 10),
     Color.FromArgb(255, 255, 0, 0),   // Opaque red
     Color.FromArgb(255, 0, 0, 255));  // Opaque blue
  
  Pen pen = new Pen(linGrBrush);
  
  e.Graphics.DrawLine(pen, 0, 10, 200, 10);
  e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100);
  e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30);
  

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.

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 Blend property of a LinearGradientBrush object 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.

  Dim linGrBrush As New LinearGradientBrush( _
     New Point(0, 10), _
     New Point(200, 10), _
     Color.FromArgb(255, 0, 0, 0), _
     Color.FromArgb(255, 255, 0, 0))
  
  Dim relativeIntensities As Single() = {0.0F, 0.5F, 1.0F}
  Dim relativePositions As Single() = {0.0F, 0.2F, 1.0F}
  
  'Create a Blend object and assign it to linGrBrush.
  Dim blend As New Blend()
  blend.Factors = relativeIntensities
  blend.Positions = relativePositions
  linGrBrush.Blend = blend
  
  e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100)
  e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30)
  

  LinearGradientBrush linGrBrush = new LinearGradientBrush(
     new Point(0, 10),
     new Point(200, 10),
     Color.FromArgb(255, 0, 0, 0),     // Opaque black 
     Color.FromArgb(255, 255, 0, 0));  // Opaque red
  
  float[] relativeIntensities = { 0.0f, 0.5f, 1.0f };
  float[] relativePositions = { 0.0f, 0.2f, 1.0f };
  
  //Create a Blend object and assign it to linGrBrush.
  Blend blend = new Blend();
  blend.Factors = relativeIntensities;
  blend.Positions = relativePositions;
  linGrBrush.Blend = blend;
  
  e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100);
  e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30);
  

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 LinearGradientBrush 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.

  Dim linGrBrush As New LinearGradientBrush( _
     New Point(0, 0), _
     New Point(200, 100), _
     Color.FromArgb(255, 0, 0, 255), _
     Color.FromArgb(255, 0, 255, 0))
  ' opaque blue
  ' opaque green
  Dim pen As New Pen(linGrBrush, 10)
  
  e.Graphics.DrawLine(pen, 0, 0, 600, 300)
  e.Graphics.FillEllipse(linGrBrush, 10, 100, 200, 100)
  

  LinearGradientBrush linGrBrush = new LinearGradientBrush(
     new Point(0, 0),
     new Point(200, 100),
     Color.FromArgb(255, 0, 0, 255),   // opaque blue
     Color.FromArgb(255, 0, 255, 0));  // opaque green
  
  Pen pen = new Pen(linGrBrush, 10);
  
  e.Graphics.DrawLine(pen, 0, 0, 600, 300);
  e.Graphics.FillEllipse(linGrBrush, 10, 100, 200, 100);
  

See Also

Other Resources

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