October 7th, 2009

Using gradients in Blend

Silverlight Blend Tutorials, Working with Silverlight, by Gavin Wignall.

This post is part of a string of posts found here: Learn Blend in a Month.

Blend supports gradients on onjects, strokes and text. To add a gradient to an object, first select the object you want to add it to, then go to the ‘Properties‘ tab. Under the ‘Brushes‘ section, select whether you want to effect the Fill (1) or the stroke (2) property, then choose the gradient icon (3). See image below for references.

  1. Select fill
  2. Select stroke
  3. Fill type: Gradient
  4. Fill type: None
  5. Fill type: Solid
  6. Color palette
  7. Gradient stops
  8. Select linear gradient
  9. Select radial gradient
  10. Reverse gradient stops
  11. Select gradient stop
  12. Position selected gradient stop

The default number of colors in a gradient is two. To add more gradient stops click anywhere along the color bar (7). To remove a gradient stop, click and drag the gradient stop off the color bar.

You can choose between ‘Linear‘ (8) and ‘Radial‘ (9) gradients by pressing the relevant icon in the bottom right of the ‘Brushes‘ options.

You can reverse all the colors by pressing the ‘Reverse‘ (10) icon to the right of the radial (9) button.

You can fine tune the positions of each gradient stop by using the ‘Gradient stop selector‘ (11) and the ‘Position bar‘ (12).

Change the angle, start position and end point of a gradient

Select the ‘Gradient Tool‘ on the main tool bar.

Now click on the item you want to edit and you should get an arrow tool appear like below.

The arrow tool shows the start and end point of the gradient and all the gradient stop colors and positions. The tool can be dragged and positioned to tweak your gradient. To rotate the gradient, move the mouse just past either end of the arrow until you get the rotate icon, then click and drag to rotate.

You can also use the ‘Gradient Transform‘ tool to fine tune your gradients look. Hold the mouse down on the ‘Gradient Tool‘ in the main tool bar and then select the ‘Gradient Transform‘ icon to switch modes.

Now select the object you want to effect and you will get a visual representation of the gradients boundaries to transform.

Back Top

Responses to “Using gradients in Blend”

  1. Good job……… i am learning silverlight now this articles are very helpful for me

  1. Learn Expression Blend in a Month! » Silverlight Buzz (,October 8, 2009)

    [...] Using gradients in Blend [...]

Leave a Reply

Back Top